feat: significant ui overhaul

Tormak9970 · Jul 16, 2023 · 3df883f · 3df883f
1 parent 5d9c4df
commit 3df883f
Show file tree

Hide file tree

Showing 21 changed files with 98 additions and 105 deletions.
diff --git a/public/theme.css b/public/theme.css
@@ -88,8 +88,8 @@
 
 .splitpanes__splitter {
 	background-color: var(--background-dark-hover) !important;
-	border-left: 1px solid var(--foreground-light) !important;
-	border-right: 1px solid var(--foreground-light) !important;
+	border-left: 1px solid transparent !important;
+	border-right: 1px solid transparent !important;
 	position: relative;
 }
 .splitpanes__splitter:before {
@@ -98,7 +98,7 @@
 	left: 0;
 	top: 0;
 	transition: opacity 0.4s;
-	background-color: var(--highlight-dim) !important;
+	background-color: var(--foreground-light) !important;
 	opacity: 0;
 	z-index: 1;
 }

diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -105,7 +105,7 @@
     height: 30px;
     width: 100%;
 
-    background: var(--foreground-hover);
+    background: var(--background);
     user-select: none;
     display: inline-flex;
     align-items: center;

diff --git a/src/components/core/filters/Options.svelte b/src/components/core/filters/Options.svelte
@@ -52,8 +52,8 @@
 <Pane minSize={15} size={20}>
   <SectionTitle title="Options" />
 
-  <div class="content" style="height: 36px;">
-    <div style="margin-left: 6px; display: flex; justify-content: space-between;">
+  <div class="content" style="height: 39px;">
+    <div style="margin-left: 6px; margin-top: 4px; display: flex; justify-content: space-between;">
       <Toggle label="Dark Mode" value={$theme == 0} onChange={onDarkModeChange}/>
     </div>
 
@@ -62,7 +62,7 @@
   </div>
 
   <div class="content" style="height: calc(100% - 85px);">
-    {#each Object.keys($dbFilters[$gridType]) as section}
+    {#each Object.keys($dbFilters[$gridType]) as section, i}
       <Accordion
         label="{section == "oneoftag" ? "Tags" : toUpperCaseSplit(section)}"
         open={true}
@@ -77,9 +77,10 @@
           <VerticalSpacer />
         {/each}
       </Accordion>
+      {#if i+1 !== Object.keys($dbFilters[$gridType]).length}
+        <VerticalSpacer />
+      {/if}
     {/each}
-
-    <VerticalSpacer />
   </div>
 </Pane>
 

diff --git a/src/components/interactables/Button.svelte b/src/components/interactables/Button.svelte
@@ -21,8 +21,8 @@
     min-width: 40px;
         
     background-color: var(--foreground);
-    border: 1px solid #000;
-    border-radius: 2px;
+    border: 1px solid transparent;
+    border-radius: 4px;
 
     display: flex;
     align-items: center;

diff --git a/src/components/interactables/Checkbox.svelte b/src/components/interactables/Checkbox.svelte
@@ -35,8 +35,8 @@
     height: 16px;
     width: 16px;
 
-    border-radius: 2px;
-    border: 1px solid #000;
+    border-radius: 4px;
+    border: 1px solid transparent;
   }
 
   .check-box-container input {
@@ -48,10 +48,11 @@
   }
 
   .check-box {
-    height: 100%;
-    width: 100%;
-    background-color: var(--foreground);
-    border-radius: 2px;
+    height: calc(100% - 4px);
+    width: calc(100% - 4px);
+    background-color: var(--background);
+    padding: 2px;
+    border-radius: 4px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -67,7 +68,7 @@
   }
 
   .check-box-container:hover input ~ .check-box {
-    background-color: var(--foreground-light);
+    background-color: var(--background-hover);
   }
 
   :global([data-theme="light"] .check-box-container:hover input ~ .check-box) {

diff --git a/src/components/interactables/DropDown.svelte b/src/components/interactables/DropDown.svelte
@@ -70,7 +70,7 @@
     {#key value}
       <div class="select-selected" class:select-arrow-active={active} bind:this={customSelectElem}>{internalValue}</div>
     {/key}
-    <div class="select-items" class:open-up={direction=="UP"} style="--top-percentage: -{(options.length + 1) * 100 - 15 }%;" class:select-hide={!active}>
+    <div class="select-items" class:open-up={direction=="UP"} style="--top-percentage: -{(options.length + 1) * 100 - 35 }%;" class:select-hide={!active}>
       {#each options as opt}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div id={opt.data} class:same-as-selected={opt.data == value} on:click|stopPropagation={selectOption} use:AppController.tippy={{ content: opt.label, placement: tooltipPosition, onShow: AppController.onTippyShow}}>{opt.label}</div>
@@ -82,10 +82,6 @@
 <style>
   @import "/theme.css";
 
-  @keyframes loopOverflowingText {
-
-  }
-
   .wrapper {
     margin: 0px;
 
@@ -101,8 +97,8 @@
   .custom-select {
     user-select: none;
     position: relative;
-    padding: 2px;
-    border-radius: 2px;
+    padding: 3px;
+    border-radius: 4px;
     border: 1px solid transparent;
 
     background-color: var(--foreground);
@@ -147,13 +143,21 @@
     overflow: hidden;
   }
   .select-items > div {
-    padding: 2px 3px;
-    padding-top: 4px;
+    padding: 3px 4px;
+    padding-top: 5px;
 
-    height: clac(22px - 7px);
+    height: calc(22px - 7px);
     
     transition: background-color 0.15s ease-in-out;
   }
+  .select-items > div:first-child {
+    border-radius: 4px 4px 0px 0px;
+    overflow: hidden;
+  }
+  .select-items > div:last-child {
+    border-radius: 0px 0px 4px 4px;
+    overflow: hidden;
+  }
   .select-items {
     position: absolute;
     background-color: var(--foreground);
@@ -162,7 +166,7 @@
     right: 0;
     z-index: 99;
     margin-top: 2px;
-    border-radius: 2px;
+    border-radius: 4px;
     border: 1px solid transparent;
     box-shadow: 3px 6px 12px -2px var(--shadow);
   }

diff --git a/src/components/interactables/IconButton.svelte b/src/components/interactables/IconButton.svelte
@@ -26,8 +26,8 @@
     min-height: 22px;
         
     background-color: var(--foreground);
-    border: 1px solid #000;
-    border-radius: 2px;
+    border: 1px solid transparent;
+    border-radius: 4px;
 
     display: flex;
     align-items: center;

diff --git a/src/components/interactables/NumberInput.svelte b/src/components/interactables/NumberInput.svelte
@@ -72,7 +72,7 @@
     color: var(--font-color);
     background-color: var(--foreground);
     border: 1px solid transparent;
-    border-radius: 2px;
+    border-radius: 4px;
     outline: none;
     padding: 3px;
     max-width: 140px;

diff --git a/src/components/interactables/PathInput.svelte b/src/components/interactables/PathInput.svelte
@@ -69,7 +69,7 @@
     color: var(--font-color);
     background-color: var(--foreground);
     border: 1px solid transparent;
-    border-radius: 2px;
+    border-radius: 4px;
     outline: none;
     padding: 3px;
     

diff --git a/src/components/interactables/SearchBar.svelte b/src/components/interactables/SearchBar.svelte
@@ -52,7 +52,7 @@
   <div class="spinner-cont" style="margin-{reversed ? "left" : "right"}: 7px;" class:showing={searching}>
     <LoadingSpinner width="20px" height="20px" />
   </div>
-  <input style="width: {width}px;" type="text" placeholder={label} on:input={onInputWrapper} on:change={onChangeWrapper} bind:value={value} bind:this={searchInput}>
+  <input style="width: calc(100% - 6px);" type="text" placeholder={label} on:input={onInputWrapper} on:change={onChangeWrapper} bind:value={value} bind:this={searchInput}>
 </div>
 
 <style>
@@ -66,7 +66,8 @@
     background-color: var(--foreground);
     border: 1px solid transparent;
     color: var(--font-color);
-    border-radius: 2px;
+    border-radius: 4px;
+    padding: 3px;
     
     transition: background-color 0.15s ease-in-out, border 0.15s ease-in-out;
   }

diff --git a/src/components/interactables/TextInput.svelte b/src/components/interactables/TextInput.svelte
@@ -43,7 +43,7 @@
     background-color: var(--foreground);
     border: 1px solid transparent;
     outline: none;
-    border-radius: 2px;
+    border-radius: 4px;
     padding: 3px;
 
     transition: background-color 0.15s ease-in-out, border 0.15s ease-in-out;

diff --git a/src/components/interactables/Toggle.svelte b/src/components/interactables/Toggle.svelte
@@ -44,6 +44,7 @@
     background: var(--foreground-light);
     border: none;
     cursor: pointer;
+    transition: background-color 0.15s ease-in-out;
   }
   .toggle button:hover {
     background: var(--foreground-light-hover);
@@ -65,7 +66,7 @@
 
     transition: background-color 0.15s ease-in-out;
   }
-  .toggle button[aria-checked="true"]:hover {background-color: var(--highlight-hover); }
+  .toggle button[aria-checked="true"]:hover { background-color: var(--highlight-hover); }
   .toggle button[aria-checked="true"]::before {
     transform: translateX(0.9em);
     transition: transform 0.3s;

diff --git a/src/components/layout/Accordion.svelte b/src/components/layout/Accordion.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <div class="accordion">
-  <button on:click={toggle} aria-expanded={isOpen}>
+  <button on:click={toggle} aria-expanded={isOpen} class:all-corners={!isOpen}>
     <svg
       style="tran"
       width="12"
@@ -56,16 +56,23 @@
     padding-top: 0.5em;
 
     width: 100%;
-    background-color: var(--foreground-light);
+    background-color: var(--background);
 
     transition: background-color 0.15s ease-in-out;
+
+    border-radius: 4px 4px 0px 0px;
+  }
+  .all-corners {
+    border-radius: 4px;
+    transition: border-radius 0.15s ease-in-out 0.15s;
   }
-  button:hover { background-color: var(--foreground-light-hover); }
+  button:hover { background-color: var(--background-hover); }
 
   .content {
     padding: 0px 6px;
     width: calc(100% - 12px);
     background-color: var(--background);
+    border-radius: 0px 0px 4px 4px;
   }
 
 	svg { transition: transform 0.2s ease-in; margin-right: 3px; }

diff --git a/src/components/layout/Table.svelte b/src/components/layout/Table.svelte
@@ -25,6 +25,8 @@
     
     padding: 7px;
 
+    border-radius: 4px;
+
     background-color: var(--background-dark);
   }
 

diff --git a/src/components/layout/pagination/Pages.svelte b/src/components/layout/pagination/Pages.svelte
@@ -29,6 +29,8 @@
     border-top: 2px solid transparent;
     
     background-color: var(--background);
+
+    border-radius: 4px;
 	}
 
   .pages-header {
@@ -66,11 +68,11 @@
 
     cursor: pointer;
 
-    background-color: var(--foreground);
+    background-color: var(--background);
 
     transition: background-color 0.15s ease-in-out;
 
-    border-radius: 2px;
+    border-radius: 4px;
   }
   li:last-child { margin-right: 0px; }
 
@@ -79,8 +81,8 @@
     display: block;
   }
 
-  li.active { background-color: var(--foreground-light); }
+  li.active { background-color: var(--foreground); }
 
-  li.active:hover { background-color: var(--foreground-light-hover) !important; }
-  li:hover { background-color: var(--foreground-hover) !important; }
+  li.active:hover { background-color: var(--foreground-hover) !important; }
+  li:hover { background-color: var(--background) !important; }
 </style>
diff --git a/src/components/layout/tabs/ListTabs.svelte b/src/components/layout/tabs/ListTabs.svelte
@@ -27,9 +27,11 @@
 	.tabs {
 		padding: 10px;
     padding-bottom: 5px;
-    border-top: 2px solid var(--foreground-light-hover);
+    border-top: 2px solid var(--foreground);
     
     background-color: var(--background);
+
+    border-radius: 0px 0px 4px 4px;
 	}
 
   ul {
@@ -47,23 +49,26 @@
 
     justify-content: center;
 
-    border-right: 2px solid var(--foreground-hover);
+    border-right: 1px solid var(--foreground);
+    overflow: hidden;
+  }
+  li:first-child {
+    border-top-left-radius: 4px;
   }
-  li:last-child { border-right: none; }
+  li:last-child { border-right: none; border-top-right-radius: 4px; }
 
   span {
-    border: 1px solid transparent;
     display: block;
-    padding: 4px 6px;
+    padding: 5px 7px;
     cursor: pointer;
 
-    background-color: var(--foreground);
+    background-color: var(--background);
 
     transition: background-color 0.15s ease-in-out;
   }
 
-  li.active > span { background-color: var(--foreground-light); }
+  li.active > span { background-color: var(--foreground); }
 
-  li.active > span:hover { background-color: var(--foreground-light-hover) !important; }
-  span:hover { background-color: var(--foreground-hover) !important; }
+  li.active > span:hover { background-color: var(--foreground-hover) !important; }
+  span:hover { background-color: var(--background-hover) !important; }
 </style>
diff --git a/src/components/toast-modals/batch-apply/BatchApplyModal.svelte b/src/components/toast-modals/batch-apply/BatchApplyModal.svelte
@@ -31,7 +31,7 @@
 <ModalBody title={`Batch Apply ${$gridType != GridTypes.HERO ? $gridType : `${$gridType}e`}s`} onClose={onClose}>
   <div class="content">
     <div class="info">
-      Configure the games you would like to batch apply grids to.
+      Choose the games you would like to batch apply grids to.
     </div>
     <GameFilter bind:selectedGameIds={selectedGameIds} />
     <div class="buttons">
@@ -47,6 +47,7 @@
   .info {
     margin-top: 7px;
     margin-left: 7px;
+    margin-right: 7px;
     font-size: 14px;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,6 +25,8 @@ @@
         padding: 7px;
+        border-radius: 4px;
         background-color: var(--background-dark);
       }
@@ Expand Down @@