From b82efb6e3c81df2f75143225b9c1c9803bf8c20c Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Sun, 6 Mar 2022 19:34:40 -0800
Subject: [PATCH] Continue the cleanup train (#396)

* Improve links and search page controls... I know it looks kinda insane

* Fix donation padding Fixes #393

* Improve text field styling

* white icon

* Improve pagination and disabled button colors

* Round tab indicator

* Fix rounding of home page points card

* I hate browsers

* Change verbiage of legacy options
---
 assets/styles/components.scss |  57 +++++++++++--
 assets/styles/global.scss     |  20 +++--
 components/ui/Pagination.vue  |  13 ++-
 components/ui/ProjectCard.vue |   9 +-
 pages/_type/_id.vue           |  10 ++-
 pages/create/project.vue      |   4 -
 pages/index.vue               |   2 +-
 pages/search.vue              | 156 ++++++++++++++++++++++------------
 pages/settings/index.vue      |   4 +-
 9 files changed, 196 insertions(+), 79 deletions(-)

diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index 335c95a53..f86ee3ba9 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -5,6 +5,29 @@
   display: inline-flex;
   position: relative;
 
+  &:hover:not([disabled]):not(:focus-within) {
+    input:not(:focus) {
+      background-color: var(--color-button-bg-hover);
+      color: var(--color-button-text-hover);
+      border-color: var(--color-divider-dark);
+    }
+
+    svg {
+      color: var(--color-button-text-hover);
+    }
+  }
+
+  &:focus-within {
+    input {
+      outline: none !important;
+      border-color: var(--color-brand);
+    }
+
+    svg {
+      color: var(--color-button-text-active) !important;
+    }
+  }
+
   input {
     padding-left: 2rem;
     width: 100%;
@@ -42,7 +65,7 @@
     color: var(--color-button-text-hover);
   }
 
-  &:active, {
+  &:active {
     background-color: var(--color-button-bg-active);
     color: var(--color-button-text-active);
   }
@@ -85,13 +108,26 @@
 .text-link {
   color: var(--color-link);
   text-decoration: underline;
+
+  &:focus-visible,
+  &:hover {
+    color: var(--color-link-hover);
+  }
+  &:active {
+    color: var(--color-link-active);
+  }
 }
 
 .title-link {
-  &:hover {
-    color: var(--color-link);
-  }
   text-decoration: underline;
+
+  &:focus-visible,
+  &:hover {
+    color: var(--color-heading);
+  }
+  &:active {
+    color: var(--color-text-dark);
+  }
 }
 
 .markdown-body {
@@ -331,9 +367,11 @@
   }
   &:disabled,
   &[disabled] {
-    opacity: 0.6;
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1px var(--color-button-bg-disabled);
+    color: var(--color-button-text-disabled);
     pointer-events: none;
-    cursor: not-allowed;
+    cursor: default;
   }
 }
 
@@ -443,6 +481,12 @@
       line-height: 20px;
     }
   }
+  .multiselect--above {
+    .multiselect__content-wrapper {
+      border-top-left-radius: var(--size-rounded-card);
+      border-top-right-radius: var(--size-rounded-card);
+    }
+  }
   .multiselect__content-wrapper {
     background: var(--color-dropdown-bg);
     border: none;
@@ -661,6 +705,7 @@ label {
       height: 4px;
       bottom: 0;
       left: 20%;
+      border-radius: var(--size-rounded-max);
     }
 
     &:hover,
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index 54a5db017..e9ad6a511 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -30,7 +30,7 @@ html {
   --color-button-text-hover: #1b1e24;
   --color-button-bg-active: #c3c6cb;
   --color-button-text-active: var(--color-button-text-hover);
-  --color-button-bg-disabled: #eceef0;
+  --color-button-bg-disabled: #cacdd2;
   --color-button-text-disabled: #9da3ac;
   --color-transparent-button-bg-hover: var(--color-button-bg);
   --color-transparent-button-text-hover: var(--color-text-dark);
@@ -55,7 +55,12 @@ html {
   --shadow-dropdown-strong: 3px 3px 10px hsla(0, 0%, 0%, 0.3);
   --shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15);
 
+  --color-grey-link: var(--color-text);
+  --color-grey-link-hover: var(--color-heading);
+  --color-grey-link-active: var(--color-text-dark);
   --color-link: #2089ff;
+  --color-link-hover: #1a76e7;
+  --color-link-active: #146fd7;
 
   --color-badge-gray-text: #646161;
   --color-badge-gray-bg: #c8c1c1;
@@ -106,7 +111,8 @@ html {
   --color-button-text-hover: #ffffff;
   --color-button-bg-active: #616570;
   --color-button-text-active: var(--color-button-text-hover);
-  --color-button-text-disabled: #797979;
+  --color-button-bg-disabled: #3a434d;
+  --color-button-text-disabled: #555d65;
   --color-transparent-button-bg-hover: var(--color-button-bg);
   --color-transparent-button-text-hover: var(--color-text-dark);
   --color-transparent-button-bg-active: var(--color-button-bg-hover);
@@ -131,6 +137,8 @@ html {
   --shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15);
 
   --color-link: #74b6f3;
+  --color-link-hover: #92c0f5;
+  --color-link-active: #b5d5fd;
 
   --color-badge-gray-bg: #646161;
   --color-badge-gray-text: #c8c1c1;
@@ -253,12 +261,14 @@ textarea {
 
   &:hover:not([disabled]):not(:focus) {
     background: var(--color-button-bg-hover);
-    color: var(--color-text);
+    color: var(--color-button-text-hover);
+    border-color: var(--color-divider-dark);
   }
 
   &:focus {
-    background: var(--color-raised-bg);
-    border-color: var(--color-divider-dark);
+    outline: none !important;
+    border-color: var(--color-brand);
+    color: var(--color-button-text-active);
   }
 
   &:disabled,
diff --git a/components/ui/Pagination.vue b/components/ui/Pagination.vue
index 7ab458475..202f67967 100644
--- a/components/ui/Pagination.vue
+++ b/components/ui/Pagination.vue
@@ -99,13 +99,20 @@ button {
   }
 
   &.paginate.disabled {
-    background-color: var(--color-button-bg);
+    background-color: transparent;
     cursor: default;
-    color: var(--color-icon);
+    color: var(--color-button-text-disabled);
+    box-shadow: inset 0 0 0 1px var(--color-button-bg-disabled);
   }
 
+  &:focus-visible,
   &:hover {
-    background: var(--color-button-bg-active);
+    background-color: var(--color-button-bg-hover);
+    color: var(--color-button-text-hover);
+  }
+
+  &:active {
+    background-color: var(--color-button-bg-active);
     color: var(--color-button-text-active);
   }
 }
diff --git a/components/ui/ProjectCard.vue b/components/ui/ProjectCard.vue
index 5caa7876e..8ffe88a00 100644
--- a/components/ui/ProjectCard.vue
+++ b/components/ui/ProjectCard.vue
@@ -18,7 +18,10 @@
               <nuxt-link :to="`/${type}/${id}`">{{ name }}</nuxt-link>
             </h2>
             <p v-if="author" class="author">
-              by <nuxt-link :to="'/user/' + author">{{ author }}</nuxt-link>
+              by
+              <nuxt-link class="title-link" :to="'/user/' + author">{{
+                author
+              }}</nuxt-link>
             </p>
           </div>
           <div class="side-type">
@@ -253,10 +256,6 @@ export default {
         .author {
           margin: auto 0 0 0;
           color: var(--color-text);
-
-          a {
-            text-decoration: underline;
-          }
         }
       }
 
diff --git a/pages/_type/_id.vue b/pages/_type/_id.vue
index 5eee76fa3..b3dd95325 100644
--- a/pages/_type/_id.vue
+++ b/pages/_type/_id.vue
@@ -929,11 +929,19 @@ export default {
       line-height: 2rem;
     }
 
+    &:focus-visible,
     &:hover {
       svg,
       img,
       span {
-        color: var(--color-link);
+        color: var(--color-heading);
+      }
+    }
+    &:active {
+      svg,
+      img,
+      span {
+        color: var(--color-text-dark);
       }
     }
 
diff --git a/pages/create/project.vue b/pages/create/project.vue
index e8e7500c0..836979ce3 100644
--- a/pages/create/project.vue
+++ b/pages/create/project.vue
@@ -1526,10 +1526,6 @@ section.donations {
       flex: 1;
     }
   }
-
-  button {
-    margin: 0.5rem 0;
-  }
 }
 
 .footer {
diff --git a/pages/index.vue b/pages/index.vue
index b147e9d91..9d7088942 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -436,7 +436,7 @@ export default {
 
   @media screen and (min-width: 1200px) {
     .points {
-      border-radius: var(--spacing-card-lg);
+      border-radius: var(--size-rounded-card);
       .point {
         flex-direction: row;
 
diff --git a/pages/search.vue b/pages/search.vue
index 161948e25..e580e2821 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -154,39 +154,41 @@
             @input="onSearchChange(1)"
           />
         </div>
-        <div class="labeled-control">
-          <span class="labeled-control__label">Sort by</span>
-          <Multiselect
-            v-model="sortType"
-            placeholder="Select one"
-            class="search-controls__sorting labeled-control__control"
-            track-by="display"
-            label="display"
-            :options="sortTypes"
-            :searchable="false"
-            :close-on-select="true"
-            :show-labels="false"
-            :allow-empty="false"
-            @input="onSearchChange(1)"
-          >
-            <template slot="singleLabel" slot-scope="{ option }">{{
-              option.display
-            }}</template>
-          </Multiselect>
-        </div>
-        <div class="labeled-control">
-          <span class="labeled-control__label">Show per page</span>
-          <Multiselect
-            v-model="maxResults"
-            placeholder="Select one"
-            class="labeled-control__control"
-            :options="[5, 10, 15, 20, 50, 100]"
-            :searchable="false"
-            :close-on-select="true"
-            :show-labels="false"
-            :allow-empty="false"
-            @input="onSearchChange(currentPage)"
-          />
+        <div class="sort-controls">
+          <div class="labeled-control">
+            <span class="labeled-control__label">Sort by</span>
+            <Multiselect
+              v-model="sortType"
+              placeholder="Select one"
+              class="search-controls__sorting labeled-control__control"
+              track-by="display"
+              label="display"
+              :options="sortTypes"
+              :searchable="false"
+              :close-on-select="true"
+              :show-labels="false"
+              :allow-empty="false"
+              @input="onSearchChange(1)"
+            >
+              <template slot="singleLabel" slot-scope="{ option }">{{
+                option.display
+              }}</template>
+            </Multiselect>
+          </div>
+          <div class="labeled-control">
+            <span class="labeled-control__label">Show per page</span>
+            <Multiselect
+              v-model="maxResults"
+              placeholder="Select one"
+              class="labeled-control__control"
+              :options="[5, 10, 15, 20, 50, 100]"
+              :searchable="false"
+              :close-on-select="true"
+              :show-labels="false"
+              :allow-empty="false"
+              @input="onSearchChange(currentPage)"
+            />
+          </div>
         </div>
       </div>
       <pagination
@@ -584,32 +586,88 @@ export default {
 
 .search-controls {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  gap: var(--spacing-card-md);
+
+  .sort-controls {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-card-md);
+    flex-wrap: wrap;
+
+    .labeled-control {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+
+      .labeled-control__label {
+        white-space: nowrap;
+      }
+    }
+  }
 
   .iconified-input {
-    margin-left: 6px;
+    flex: 1;
 
     input {
-      width: calc(100% + 8px);
+      min-width: 15rem;
+      width: 100%;
     }
   }
 }
 
 .search-controls__sorting {
-  min-width: 15rem;
+  min-width: 14rem;
 }
 
 .labeled-control__label,
 .labeled-control__control {
   display: block;
-  margin: 0.5rem 0;
 }
 
 .no-results {
   text-align: center;
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 700px) {
+  .search-controls {
+    flex-wrap: nowrap;
+    flex-direction: row;
+  }
+
+  .sort-controls {
+    min-width: fit-content;
+    max-width: fit-content;
+    flex-wrap: nowrap;
+  }
+
+  .labeled-control {
+    align-items: center;
+    display: flex;
+    flex-direction: column !important;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    max-width: fit-content;
+  }
+
+  .labeled-control__label {
+    flex-shrink: 0;
+    margin-bottom: 0 !important;
+  }
+}
+
+@media screen and (min-width: 860px) {
+  .labeled-control {
+    flex-wrap: nowrap !important;
+    flex-direction: row !important;
+  }
+}
+
+@media screen and (min-width: 1024px) {
   .sidebar-menu {
     display: block;
     margin-top: 0;
@@ -619,22 +677,16 @@ export default {
     display: none;
   }
 
-  .search-controls {
-    flex-direction: row;
-  }
-
   .labeled-control {
-    align-items: center;
-    display: flex;
+    flex-wrap: wrap !important;
+    flex-direction: column !important;
   }
+}
 
-  .labeled-control__label,
-  .labeled-control__control {
-    margin: 0 0 0 1rem;
-  }
-
-  .labeled-control__label {
-    flex-shrink: 0;
+@media screen and (min-width: 1100px) {
+  .labeled-control {
+    flex-wrap: nowrap !important;
+    flex-direction: row !important;
   }
 }
 </style>
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index f4754539f..1032c8d04 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -107,7 +107,7 @@
             :allow-empty="false"
           />
         </label>
-        <h3>Legacy search layout</h3>
+        <h3>Search sidebar on right side</h3>
         <label>
           <span>
             Sets the sidebar direction for search pages. Enabling this will put
@@ -120,7 +120,7 @@
             @change="changeLayout"
           />
         </label>
-        <h3>Legacy project layout</h3>
+        <h3>Project sidebar on right side</h3>
         <label>
           <span>
             Sets the sidebar direction for project pages. Enabling this will