Instances UI

fclauncher/frontend/package.json.md5

@@ -1 +1 @@
-ad9da3c17151b053a4d2fda8e3578901
+48cb20b8d107dab0a7876a449352234a

fclauncher/frontend/src/Instancepage.svelte

@@ -34,27 +34,29 @@ import {onMount, createEventDispatcher} from 'svelte'
 
 
 <main>
+    <div class="instance-header">Instances</div>
     <div class="header">
-        <div>Instances</div>
-    <div class="container">
-        <div class="tile-group">
-            {#each $instances as instance}
-                <div class="input-container" id=input-container>
-                    <input id={instance} bind:group={radio} type="radio" name="radio" value={instance}>
-                    <div class="radio-tile">
-                        <!--icon goes here later-->
-                        <label for={instance}>{instance}</label>
-                    </div>
-                </div>
-            {/each}
         
+        <div class="container">
+            <div class="tile-group">
+                {#each $instances as instance}
+                    <div class="input-container" id=input-container>
+                        <input id={instance} bind:group={radio} type="radio" name="radio" value={instance}>
+                        <div class="radio-tile">
+                        <!--icon goes here later-->
+                            <label for={instance}>{instance}</label>
+                        </div>
+                    </div>
+                {/each}
+            
+            </div>
+        </div>
+        <div class="options-container">
+            <button class="launch-button" on:click={launchclick}>Launch {radio}</button>
+            <button class="option-button">Open Instance Folder</button>
         </div>
     </div>
-    </div>
-    <div class="options-container">
-        <button class="launch-button" on:click={launchclick}>Launch {radio}</button>
-        <button class="changecolor" on:click={changetheme}>Change color</button>
-        </div>
+    
 </main>
 
 <style>
@@ -73,24 +75,71 @@ body{
 }
 main{
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
 }
 
 .header{
+    display: flex;
     flex: 3;
+    flex-direction: row;
+    
+
+}
+.instance-header{
+    display: inline-block;
+    font-weight: bold;
+    text-transform: uppercase;
+    margin-bottom: 1rem;
+    text-align: center;
+    font-size: 1.5rem;
+    color: var(--text-primary);
 }
 .options-container{
     display: flex;
-    height: 100vh;
+    height: 100%;
     justify-self: right;
     justify-content: center;
     align-items: center;
     width: 15rem;
     flex-direction: column;
     position: relative;
+    margin-left: auto;
+    margin-top: 15rem;
+    gap: 10px;
 }
 .launch-button{
-    height: 3rem;
+    min-height: 3rem;
+    border:solid;
+    border-radius: 4px;
+    background-color: var(--bg-secondary);
+    border-color: var(--bg-secondary);
+    color: var(--text-primary);
+    font-size: large;
+    max-width: 10rem;
+    max-height: fit-content;
+}
+.launch-button:hover{
+    color: var(--text-secondary);
+}
+.launch-button:active{
+    opacity: 0.6;
+}
+.option-button{
+    min-height: 3rem;
+    border:solid;
+    border-radius: 4px;
+    background-color: var(--bg-secondary);
+    border-color: var(--bg-secondary);
+    color: var(--text-primary);
+    font-size: medium;
+    max-width: 10rem;
+    max-height: fit-content;
+}
+.option-button:hover{
+    color: var(--text-secondary);
+}
+.option-button:active{
+    opacity: 0.6;
 }
 .container{
    display: flex;

fclauncher/frontend/src/Settingspage.svelte

@@ -52,10 +52,14 @@ function changethemeback(){
     width: 4rem;
     justify-content: center;
     height: 4rem;
+    transition: 100ms;
 }
 .theme-button:hover{
     color: var(--text-secondary);
 }
+.theme-button:active{
+    opacity: 0.6;
+}
 #green{
     background-color: green;
     border-color: green;