Update 22.3.2023

src/lib/components/Common/PopUp.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+	import { each } from "svelte/internal"
+	import { Html } from "./Meta"
+
+
+    export let headline:string= "";
+    export let options:any[] = [];
+    export let on_return:Function  = () => {};
+    export let default_ans:string = undefined
+
+    let selected:string = default_ans
+
+    function change_answer(){
+        const container = (event.currentTarget as HTMLInputElement).parentElement.parentElement
+
+        selected = (container.querySelector("input:checked") as HTMLInputElement).parentElement.querySelector("p").innerText
+    }
+
+    function cancel_popUp(){
+        on_return(undefined)
+    }
+    function save_popUp(){
+        on_return(selected)
+    }
+</script>
+
+<div class="pop-up-container">
+    <div class="pop-up">
+        <h1 class="headline">
+            {headline}
+        </h1>
+        
+        <div class="options">
+            {#each options as option}
+                <label class="option">
+                    {#if option === selected}
+                    <input type="radio" on:change={change_answer} name="input" hidden checked/>
+                    {:else}
+                    <input type="radio" on:change={change_answer} name="input" hidden/>
+                    {/if}
+                    <div class="option-content">
+                        <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M6.26667 1.66671L6.10667 0.866707C6.04667 0.560041 5.77333 0.333374 5.45333 0.333374H0.666667C0.3 0.333374 0 0.633374 0 1.00004V11C0 11.3667 0.3 11.6667 0.666667 11.6667C1.03333 11.6667 1.33333 11.3667 1.33333 11V7.00004H5.06667L5.22667 7.80004C5.28667 8.11337 5.56 8.33337 5.88 8.33337H9.33333C9.7 8.33337 10 8.03337 10 7.66671V2.33337C10 1.96671 9.7 1.66671 9.33333 1.66671H6.26667Z" fill="white"/>
+                        </svg>
+                        <p>{option}</p>
+                    </div>
+                </label>
+            {/each}
+        </div>
+
+        <div class="actions">
+            <button on:click={cancel_popUp} class="cancel">
+                Cancel
+            </button>
+            <button on:click={save_popUp} class="save">
+                Save
+            </button>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .pop-up-container{
+        position: absolute;
+        z-index: 9999;
+        top: 0;
+        left: 0;
+        backdrop-filter: blur(5px) brightness(60%);
+        width: 100%;
+        height: 100%;
+        .pop-up{
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            padding: 24px;
+            gap: 16px;
+
+            position: absolute;
+            top: 50%;
+            left: 50%;
+
+            transform: translate(-50%, -50%);
+
+            width: 80%;
+
+            background: #FFFFFF;
+            border-radius: 8px;
+
+            .headline{
+                font-family: 'Lato';
+                font-style: normal;
+                font-weight: 400;
+                font-size: 22px;
+
+                letter-spacing: 0.004em;
+
+                /* Black */
+
+                color: #212529;
+                margin: 0;
+            }
+
+            .options{
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: flex-start;
+                flex-wrap: wrap;
+                gap:16px;
+                .option{
+                    .option-content{
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: center;
+                        align-items: center;
+                        padding: 8px 12px;
+                        gap: 7px;
+
+                        background: #F7F5FF;
+                        
+
+                        svg, p{
+                            color: #4263EB;
+                            path{
+                                fill: #4263EB
+                            }
+                            
+                        }
+                        border-radius: 16px;
+                    }
+                    &:has(input:checked){
+                        .option-content{
+                            background:#4263EB;
+                            
+                            svg, p{
+                                color:#F7F5FF;
+                                path{
+                                    fill: #F7F5FF
+                                }
+                            }
+                        }
+                    }
+                }
+
+                
+            }
+
+            .actions{
+                width: 100%;
+
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: flex-end;
+                gap: 16px;
+                button {
+                    border-radius: 12px;
+                    padding: 12px 16px;
+                    text-align: center;
+                    /* label medium */
+
+                    font-family: 'Work Sans';
+                    font-style: normal;
+                    font-weight: 500;
+                    font-size: 14px;
+                    line-height: 20px;
+                    /* identical to box height, or 143% */
+
+                    display: flex;
+                    align-items: center;
+                    letter-spacing: 0.4px;
+
+                    &:hover{
+                        opacity: 50%;
+                    }
+                }
+                .save{
+                    background: #4263EB;
+                    color: white;
+                }
+                .cancel{
+                    color: #4263EB;
+                    background: #F7F5FF;
+                }
+            }   
+        }
+    }
+
+
+</style>

src/main.scss

@@ -9,6 +9,7 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
 
 html,
 body {

src/routes/profile/functions/Setting.svelte

@@ -1,16 +1,37 @@
 <script lang="ts">
-    import Line from '$lib/components/Common/Line.svelte'
+    import Line from '$lib/components/Common/Line.svelte';
-	import SettingRow from '$lib/components/Common/SettingRow.svelte'
+	import SettingRow from '$lib/components/Common/SettingRow.svelte';
-	import { Link } from 'svelte-routing'
+	import { Link } from 'svelte-routing';
-	import Earth from '$lib/svg/Earth.svelte'
+	import Earth from '$lib/svg/Earth.svelte';
     import Sun from '$lib/svg/Sun.svelte';
+	import PopUp from '$lib/components/Common/PopUp.svelte'
+    
+
+    let popUp_Active = false
+    let popUp_Options = []
+    let popUp_Curent = ""
+
+    function popUp_save(answer:string) {
+        if (answer === undefined){
+            popUp_Active = false
+        }
+        else{
+            popUp_Active = false
+        }
+    }
+
+    function PopUp_open(options:any[]){
+        popUp_Options = options
+        popUp_Active=true
+    }
 
     const items = [
 		{
 			title: '',
-			itms: [{ icon: Sun, text: 'Theme', link:"/"}, { icon: Earth, text: 'Language', link:"/"}],
+			itms: [{ icon: Sun, text: 'Theme', options:["Dark", "Light"]}, { icon: Earth, text: 'Language', options:["Czech", "English"]}],
 		}
 	]
+
 </script>
 
 <Line />
@@ -19,13 +40,15 @@
         {#if title !== ""}
             <div class="mb-4 text-[18px] text-[#61646B]">{title}</div>
         {/if}
-        {#each itms as { icon, text, link}}
+        {#each itms as { icon, text, options}}
             <SettingRow>
                 <svelte:component this={icon} />
-                <Link class="font-semibold text-[18px]" to={link}>{text}</Link>
+                <button class="font-semibold text-[18px]" on:click={() => PopUp_open(options)} >{text}</button>
             </SettingRow>
-
         {/each}
     {/each}
+    {#if popUp_Active}
+        <PopUp headline="Which language would you like to choose?" options={popUp_Options} on_return={popUp_save} default_ans={popUp_Curent}/>
+    {/if}
 </div>