Improve badges and work on a more unified color scheme for random col…

…ors (#756)
modrinth · Nov 20, 2022 · 88fa103 · 88fa103
1 parent 9849bc0
commit 88fa103
Show file tree

Hide file tree

Showing 19 changed files with 147 additions and 179 deletions.
diff --git a/assets/images/utils/archive.svg b/assets/images/utils/archive.svg
diff --git a/assets/images/utils/box.svg b/assets/images/utils/box.svg
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
@@ -27,35 +27,6 @@
   }
 }
 
-.badge {
-  max-height: 1rem;
-  border-radius: 1rem;
-  font-size: var(--font-size-xs);
-  font-weight: bold;
-  letter-spacing: 0.02rem;
-  padding: 0.25rem 0.5rem;
-
-  &.gray {
-    background-color: var(--color-badge-gray-bg);
-    color: var(--color-badge-gray-text);
-  }
-
-  &.red {
-    background-color: var(--color-badge-red-bg);
-    color: var(--color-badge-red-text);
-  }
-
-  &.green {
-    background-color: var(--color-badge-green-bg);
-    color: var(--color-badge-green-text);
-  }
-
-  &.yellow {
-    background-color: var(--color-badge-yellow-bg);
-    color: var(--color-badge-yellow-text);
-  }
-}
-
 .text-link {
   color: var(--color-link);
   text-decoration: underline;
@@ -532,7 +503,7 @@ tr.button-transparent {
 }
 
 .danger-button {
-  --background-color: var(--color-badge-red-bg);
+  --background-color: var(--color-special-red);
   --text-color: var(--color-brand-inverted);
 }
 
@@ -554,7 +525,7 @@ tr.button-transparent {
 }
 
 .known-error .multiselect__tags {
-  border-color: var(--color-badge-red-bg) !important;
+  border-color: var(--color-special-red) !important;
   background-color: var(--color-warning-bg) !important;
 
   &::placeholder {
@@ -898,7 +869,7 @@ tr.button-transparent {
 .text-input-wrapper.known-error,
 input.known-error,
 textarea.known-error {
-  outline: 2px solid var(--color-badge-red-bg);
+  outline: 2px solid var(--color-special-red);
   background-color: var(--color-warning-bg) !important;
 
   &::placeholder {
@@ -907,7 +878,7 @@ textarea.known-error {
 }
 
 .known-errors {
-  color: var(--color-badge-red-bg);
+  color: var(--color-special-red);
 
   ul {
     margin: 0;
@@ -1017,7 +988,7 @@ h1 {
       font-weight: bold;
 
       .required {
-        color: var(--color-badge-red-bg);
+        color: var(--color-special-red);
       }
     }
     .label__description {

diff --git a/assets/styles/global.scss b/assets/styles/global.scss
@@ -19,7 +19,8 @@ html {
   --color-text-inverted: var(--color-bg);
   --color-bg-inverted: var(--color-text);
 
-  --color-brand: #00af5c;
+  --color-brand-green: #00af5c;
+  --color-brand: var(--color-brand-green);
   --color-brand-highlight: rgba(0, 175, 92, 0.25);
   --color-brand-shadow: rgba(0, 175, 92, 0.7);
   --color-brand-inverted: #ffffff;
@@ -56,14 +57,12 @@ html {
   --color-link-hover: #1a76e7;
   --color-link-active: #146fd7;
 
-  --color-badge-gray-text: #646161;
-  --color-badge-gray-bg: #c8c1c1;
-  --color-badge-red-text: #6e1931;
-  --color-badge-red-bg: #db3162;
-  --color-badge-green-text: #184e38;
-  --color-badge-green-bg: #24a54e;
-  --color-badge-yellow-text: #755920;
-  --color-badge-yellow-bg: #f7bb43;
+  --color-special-red: #cb2245;
+  --color-special-orange: #e08325;
+  --color-special-green: var(--color-brand-green);
+  --color-special-blue: #1f68c0;
+  --color-special-purple: #8e32F3;
+  --color-special-gray: #595B61;
 
   --color-warning-bg: hsl(355, 70%, 88%);
   --color-warning-text: hsl(342, 70%, 35%);
@@ -107,7 +106,15 @@ html {
   --color-text-inverted: var(--color-bg);
   --color-bg-inverted: var(--color-text);
 
-  --color-brand: #1bd96a;
+  --color-special-red: #ff496e;
+  --color-special-orange: #ffa347;
+  --color-special-green: var(--color-brand-green);
+  --color-special-blue: #4F9CFF;
+  --color-special-purple: #C78AFF;
+  --color-special-gray: #9FA4B3;
+
+  --color-brand-green: #1bd96a;
+  --color-brand: var(--color-brand-green);
   --color-brand-highlight: rgba(27, 217, 106, 0.25);
   --color-brand-shadow: rgba(27, 217, 106, 0.7);
   --color-brand-inverted: #000;
@@ -141,15 +148,6 @@ html {
   --color-link-hover: #92c0f5;
   --color-link-active: #b5d5fd;
 
-  --color-badge-gray-bg: #646161;
-  --color-badge-gray-text: #c8c1c1;
-  --color-badge-red-text: #bd1a48;
-  --color-badge-red-bg: #db3162;
-  --color-badge-green-text: #1ebb7b;
-  --color-badge-green-bg: #24a54e;
-  --color-badge-yellow-text: #dba22d;
-  --color-badge-yellow-bg: #f7bb43;
-
   --color-warning-bg: hsl(355, 70%, 20%);
   --color-warning-text: hsl(342, 70%, 75%);
 

diff --git a/components/ui/Badge.vue b/components/ui/Badge.vue
@@ -1,20 +1,63 @@
 <template>
-  <span :class="'version-badge ' + color">
-    <span class="circle" /> {{ type }}
+  <span :class="'version-badge ' + color + ' type--' + type">
+    <template v-if="color"
+      ><span class="circle" /> {{ $capitalizeString(type) }}</template
+    >
+    <template v-else-if="type === 'admin'"
+      ><ModrinthIcon /> Modrinth Team</template
+    >
+    <template v-else-if="type === 'moderator'"
+      ><ModeratorIcon /> Moderator</template
+    >
+    <template v-else-if="type === 'creator'"><CreatorIcon /> Creator</template>
+    <template v-else-if="type === 'approved'"><ListIcon /> Listed</template>
+    <template v-else-if="type === 'unlisted'"><EyeOffIcon /> Unlisted</template>
+    <template v-else-if="type === 'draft'"><DraftIcon /> Draft</template>
+    <template v-else-if="type === 'archived'"
+      ><ArchiveIcon /> Archived</template
+    >
+    <template v-else-if="type === 'rejected'"><CrossIcon /> Rejected</template>
+    <template v-else-if="type === 'processing'"
+      ><ProcessingIcon /> Under review</template
+    >
+    <template v-else
+      ><span class="circle" /> {{ $capitalizeString(type) }}</template
+    >
   </span>
 </template>
 
 <script>
+import ModrinthIcon from '~/assets/images/logo.svg?inline'
+import ModeratorIcon from '~/assets/images/sidebar/admin.svg?inline'
+import CreatorIcon from '~/assets/images/utils/box.svg?inline'
+import ListIcon from '~/assets/images/utils/list.svg?inline'
+import EyeOffIcon from '~/assets/images/utils/eye-off.svg?inline'
+import DraftIcon from '~/assets/images/utils/file-text.svg?inline'
+import CrossIcon from '~/assets/images/utils/x.svg?inline'
+import ArchiveIcon from '~/assets/images/utils/archive.svg?inline'
+import ProcessingIcon from '~/assets/images/utils/updated.svg?inline'
+
 export default {
   name: 'Badge',
+  components: {
+    ModrinthIcon,
+    ListIcon,
+    DraftIcon,
+    EyeOffIcon,
+    ModeratorIcon,
+    CreatorIcon,
+    CrossIcon,
+    ArchiveIcon,
+    ProcessingIcon,
+  },
   props: {
     type: {
       type: String,
       required: true,
     },
     color: {
       type: String,
-      required: true,
+      default: '',
     },
   },
 }
@@ -25,54 +68,52 @@ export default {
   display: flex;
   align-items: center;
   font-weight: bold;
-  text-transform: capitalize;
+  width: fit-content;
+  --badge-color: var(--color-special-gray);
+  color: var(--badge-color);
 
   .circle {
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 50%;
     display: inline-block;
     margin-right: 0.25rem;
+    background-color: var(--badge-color);
   }
 
-  &.custom-circle {
-    @media screen and (min-width: 560px) {
-      .circle {
-        margin-left: auto;
-      }
-    }
+  svg {
+    margin-right: 0.25rem;
   }
 
+  &.type--rejected,
   &.red {
-    color: var(--color-badge-red-text);
+    --badge-color: var(--color-special-red);
+  }
 
-    .circle {
-      background-color: var(--color-badge-red-bg);
-    }
+  &.type--moderator,
+  &.type--processing,
+  &.orange {
+    --badge-color: var(--color-special-orange);
   }
 
+  &.type--admin,
   &.green {
-    color: var(--color-badge-green-text);
-
-    .circle {
-      background-color: var(--color-brand);
-    }
+    --badge-color: var(--color-special-green);
   }
 
-  &.yellow {
-    color: var(--color-badge-yellow-text);
+  &.type--creator,
+  &.type--approved,
+  &.blue {
+    color: var(--color-special-blue);
+  }
 
-    .circle {
-      background-color: var(--color-badge-yellow-bg);
-    }
+  &.type--unlisted,
+  &.purple {
+    color: var(--color-special-purple);
   }
 
   &.gray {
-    color: var(--color-badge-gray-text);
-
-    .circle {
-      background-color: var(--color-badge-gray-bg);
-    }
+    --badge-color: var(--color-special-gray);
   }
 }
 </style>
diff --git a/components/ui/FileInput.vue b/components/ui/FileInput.vue
@@ -99,11 +99,11 @@ input {
 }
 
 .known-error label {
-  border-color: var(--color-badge-red-bg) !important;
+  border-color: var(--color-special-red) !important;
   background-color: var(--color-warning-bg) !important;
 
   span {
-    border-color: var(--color-badge-red-bg);
+    border-color: var(--color-special-red);
   }
 
   &::placeholder {

diff --git a/components/ui/ModalTransfer.vue b/components/ui/ModalTransfer.vue
@@ -211,7 +211,7 @@ export default {
   }
 
   .invalid {
-    color: var(--color-badge-red-bg);
+    color: var(--color-special-red);
   }
 
   .confirm-text {

diff --git a/components/ui/ProjectCard.vue b/components/ui/ProjectCard.vue
@@ -134,22 +134,7 @@
         </div>
       </div>
       <div v-if="status" class="status">
-        <Badge
-          v-if="status === 'approved'"
-          color="green custom-circle"
-          :type="status"
-        />
-        <Badge
-          v-else-if="status === 'processing' || status === 'archived'"
-          color="yellow custom-circle"
-          :type="status"
-        />
-        <Badge
-          v-else-if="status === 'rejected'"
-          color="red custom-circle"
-          :type="status"
-        />
-        <Badge v-else color="gray custom-circle" :type="status" />
+        <Badge :type="status" />
       </div>
       <div class="buttons">
         <slot />
@@ -402,6 +387,8 @@ export default {
     }
 
     .status {
+      display: flex;
+      justify-content: right;
       margin-bottom: 0.5rem;
     }
 

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -622,14 +622,6 @@ export default {
           width: auto;
         }
 
-        .badge {
-          margin-left: 0.25rem;
-          display: none;
-          @media screen and (min-width: 430px) {
-            display: unset;
-          }
-        }
-
         button {
           background: none;
           border: none;