fix(misc): global styles (#5013)

* fix(color): foreground-alt hue * fix(typography): small sizes and uppercase legibility * feat(modal): close button as prop * fix(welcomemodal): style * fix(button): large font size * fix(contextmenu): drop shadow * fix(typography): text label style * fix(locale): fix strings * fix(modal): confirmation styles * fix(call): duration string * fix(settings): profile grid layout * fix(settings): button width
Satellite-im · Sep 26, 2022 · 9f0e505 · 9f0e505
1 parent 682423c
commit 9f0e505
Show file tree

Hide file tree

Showing 30 changed files with 112 additions and 109 deletions.
diff --git a/assets/styles/framework/colors.less b/assets/styles/framework/colors.less
@@ -1,6 +1,6 @@
 // Base Colors
 @foreground: #252a3a;
-@foreground-alt: #3a3a50;
+@foreground-alt: #2d3744;
 @midground: #16161e;
 @midground-alt: #00000026;
 @background-hover: #2e303d;

diff --git a/assets/styles/framework/typography.less b/assets/styles/framework/typography.less
@@ -8,8 +8,8 @@
 @heading-font: 'SpaceMono', monospace;
 @body-font: 'Poppins';
 
-@font-size-xs: 0.75rem;
-@font-size-sm: 0.875rem;
+@font-size-xs: 0.8rem;
+@font-size-sm: 0.9rem;
 @font-size-md: 1rem;
 @font-size-lg: 1.125rem;
 @font-size-xl: 1.25rem;
@@ -26,6 +26,7 @@ h6 {
 
 .uppercase {
   text-transform: uppercase;
+  letter-spacing: 0.05ex;
 }
 
 .font {

diff --git a/components/interactables/Button/Button.less b/components/interactables/Button/Button.less
@@ -43,7 +43,7 @@
     }
     &-lg {
       padding: 0.75rem 1.25rem;
-      font-size: @font-size-xl;
+      font-size: @font-size-lg;
     }
   }
 

diff --git a/components/interactables/Close/Close.html b/components/interactables/Close/Close.html
@@ -1,3 +1,3 @@
-<div class="close-button" v-on:click="action">
-  <x-icon size="1x" />
+<div class="close-button" @click="$emit('click', $event)">
+  <x-icon size="1.6x" />
 </div>
diff --git a/components/interactables/Close/Close.less b/components/interactables/Close/Close.less
@@ -1,32 +1,15 @@
 .close-button {
   &:extend(.font-primary);
   position: absolute;
-  right: 2rem;
-  top: 1.75rem;
+  right: 0;
+  top: 0;
   font-size: @text-size;
-  background: @foreground-alt;
-  width: 1.5rem;
-  height: 1.5rem;
-  text-align: center;
-  border-radius: @half;
+  width: 3rem;
+  height: 3rem;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-}
-
-.wrapper .close-button {
-  right: 0;
-  top: 0;
-}
-
-@media only screen and (max-width: @mobile-breakpoint) {
-  .close-button {
-    right: @normal-spacing;
-    top: @normal-spacing;
-  }
-
-  .wrapper .close-button {
-    top: @large-spacing;
-  }
+  color: @dark;
+  filter: drop-shadow(0px 5px 8px @black);
 }
diff --git a/components/interactables/ContextMenu/ContextMenu.less b/components/interactables/ContextMenu/ContextMenu.less
@@ -10,6 +10,8 @@
   padding: 8px;
   max-width: 200px;
   min-width: 150px;
+  box-shadow: @ui-shadow;
+
   .subtitle {
     margin: 0 0 @light-spacing @light-spacing;
     font-size: @mini-text-size;

diff --git a/components/interactables/KeybindInput/KeybindInput.html b/components/interactables/KeybindInput/KeybindInput.html
@@ -4,7 +4,7 @@
   ref="container"
   tabindex="-1"
 >
-  <TypographyLabel :text="name" />
+  <TypographyText as="label">{{ name }}</TypographyText>
   <div class="control">
     <TypographyText v-if="!isListening && value === ''" class="info-label">
       {{$t('pages.settings.keybinds.no_mapping')}}

diff --git a/components/interactables/Select/Select.html b/components/interactables/Select/Select.html
@@ -1,12 +1,5 @@
 <div class="listbox" :class="`font-size-${size}`" :value="value" ref="listbox">
-  <TypographyText
-    :id="`${label}-label`"
-    :class="{ hidden : !showLabel }"
-    class="listbox-label"
-    color="light"
-    size="sm"
-    uppercase
-  >
+  <TypographyText :class="{ hidden : !showLabel }" as="label">
     {{ label }}
   </TypographyText>
   <select

diff --git a/components/interactables/Select/Select.less b/components/interactables/Select/Select.less
@@ -3,10 +3,6 @@
   flex-direction: column;
   align-items: flex-start;
 
-  .listbox-label {
-    padding-bottom: @xlight-spacing;
-  }
-
   .mobile-select {
     width: 100%;
   }

diff --git a/components/typography/HorizontalRuleText/HorizontalRuleText.less b/components/typography/HorizontalRuleText/HorizontalRuleText.less
@@ -3,7 +3,7 @@
   &:extend(.flex-centered);
   margin: @normal-spacing 0;
   font-family: @primary-font;
-  font-size: @mini-text-size;
+  font-size: @font-size-xs;
 }
 
 .separator::before,

diff --git a/components/typography/Label/Label.less b/components/typography/Label/Label.less
@@ -1,5 +1,5 @@
 .typography-label {
   font-family: @secondary-font;
-  font-size: 12px;
+  font-size: @font-size-xs;
   text-transform: uppercase;
 }
diff --git a/components/typography/Text.vue b/components/typography/Text.vue
@@ -3,7 +3,7 @@
     :is="as"
     :class="[
       `font-${getFont} font-color-${getColor} font-size-${getSize} font-weight-${getWeight}`,
-      { uppercase: uppercase },
+      { uppercase: getUppercase },
     ]"
   >
     <slot />
@@ -71,7 +71,7 @@ export default Vue.extend({
         ['h4', 'md'],
         ['h5', 'sm'],
         ['h6', 'xs'],
-        ['label', 'sm'],
+        ['label', 'xs'],
         ['small', 'sm'],
       ])
       return map.get(this.as) || 'md'
@@ -85,6 +85,9 @@ export default Vue.extend({
       }
       return 'normal'
     },
+    getUppercase(): boolean {
+      return this.uppercase || this.as === 'label'
+    },
   },
 })
 </script>
diff --git a/components/ui/Global/Global.html b/components/ui/Global/Global.html
@@ -85,7 +85,10 @@
     </UiModal>
     <UiChatImageOverlay v-if="ui.chatImageOverlay" />
     <FilesView v-if="files.preview" />
-    <UiModal v-if="isNewAccount">
+    <UiModal
+      v-if="isNewAccount"
+      @close="$store.commit('accounts/setNewAccount', false)"
+    >
       <UiWelcomeModal />
     </UiModal>
   </transition>

diff --git a/components/ui/Modal/Modal.html b/components/ui/Modal/Modal.html
@@ -2,5 +2,6 @@
   <div class="modal" :class="{small: small}" v-click-outside="close">
     <TypographyTitle v-if="title" :text="title" :size="6" />
     <slot />
+    <InteractablesClose v-if="showCloseButton" @click="close" />
   </div>
 </div>
diff --git a/components/ui/Modal/Modal.vue b/components/ui/Modal/Modal.vue
@@ -14,6 +14,10 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
   },
   created() {
     this.addEventListener()

diff --git a/components/ui/WelcomeModal/WelcomeModal.vue b/components/ui/WelcomeModal/WelcomeModal.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalDialog :primary-button="primaryButton">
     <template #image>
-      <img src="~/assets/svg/mascot/new_things.svg" />
+      <img class="mascot-glow" src="~/assets/svg/mascot/new_things.svg" />
+      <img class="mascot-overlay" src="~/assets/svg/mascot/new_things.svg" />
     </template>
 
     <template #title>
@@ -15,7 +16,6 @@
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
-import { CheckIcon } from 'satellite-lucide-icons'
 import { RootState } from '~/types/store/store'
 import iridium from '~/libraries/Iridium/IridiumManager'
 
@@ -33,7 +33,6 @@ export default Vue.extend({
       return {
         text: this.$t('modal.update_modal.got_it'),
         action: this.closeModal,
-        icon: CheckIcon,
       }
     },
   },
@@ -44,3 +43,15 @@ export default Vue.extend({
   },
 })
 </script>
+
+<style lang="less">
+.mascot-glow {
+  position: absolute;
+  filter: blur(10px);
+  mix-blend-mode: color-dodge;
+}
+
+.mascot-overlay {
+  position: relative;
+}
+</style>
diff --git a/components/views/ModalDialog/ModalDialog.less b/components/views/ModalDialog/ModalDialog.less
@@ -19,15 +19,11 @@
       img {
         width: 15rem;
         height: 15rem;
-        filter: drop-shadow(0 0 3px @flair-color);
+        pointer-events: none;
+        user-select: none;
       }
     }
 
-    .title {
-      color: @secondary-text;
-      text-align: center;
-    }
-
     .subtitle,
     .body {
       overflow: auto;

diff --git a/components/views/ModalDialog/ModalDialog.vue b/components/views/ModalDialog/ModalDialog.vue
@@ -7,7 +7,7 @@
       </div>
 
       <!-- title -->
-      <TypographyText v-if="$slots.title" color="body" size="xl" class="title">
+      <TypographyText v-if="$slots.title" as="h1" color="body" class="title">
         <slot name="title"></slot>
       </TypographyText>
 
@@ -27,6 +27,7 @@
       <InteractablesButton
         v-if="primaryButton"
         class="action"
+        size="lg"
         @click="primaryButton.action"
       >
         <component
@@ -35,7 +36,7 @@
           size="1x"
         />
 
-        <TypographyText class="text">{{ primaryButton.text }}</TypographyText>
+        {{ primaryButton.text }}
       </InteractablesButton>
     </div>
   </div>

diff --git a/components/views/callToAction/CallToAction.html b/components/views/callToAction/CallToAction.html
@@ -1,5 +1,4 @@
 <div class="cta" data-cy="modal-cta">
-  <InteractablesClose :action="closeModal" />
   <satellite-icon class="sat-icon" size="3.5x" />
   <TypographyTitle
     class="main-title"

diff --git a/components/views/callToAction/CallToAction.less b/components/views/callToAction/CallToAction.less
@@ -8,10 +8,6 @@
   background: @modal-gradient;
   color: @secondary-text;
 
-  .close-button {
-    top: @large-spacing * 2;
-  }
-
   .sat-icon {
     fill: @white;
     margin: 0 auto @normal-spacing;

diff --git a/components/views/confirmation/Confirmation.vue b/components/views/confirmation/Confirmation.vue
@@ -2,7 +2,7 @@
   <div class="confirmation">
     <div class="confirmation-main">
       <TypographyText color="flair" class="icon-container">
-        <info-icon size="1.5x" />
+        <info-icon size="2x" />
       </TypographyText>
       <div class="body">
         <div class="heading">
@@ -22,10 +22,12 @@
     </div>
 
     <div class="buttons">
-      <InteractablesButton color="light" class="close-button" @click="close">
-        <TypographyText color="light" font="heading">
-          {{ $t('ui.close') }}
-        </TypographyText>
+      <InteractablesButton
+        :color="showConfirmButton ? 'light' : 'primary'"
+        class="close-button"
+        @click="close"
+      >
+        {{ $t('ui.close') }}
       </InteractablesButton>
 
       <InteractablesButton
@@ -34,9 +36,7 @@
         class="confirm-button"
         @click="confirm"
       >
-        <TypographyText color="light" font="heading">
-          {{ $t('ui.confirm') }}
-        </TypographyText>
+        {{ $t('ui.confirm') }}
       </InteractablesButton>
     </div>
   </div>
@@ -71,23 +71,23 @@ export default Vue.extend({
 .confirmation {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: stretch;
   justify-content: center;
-  gap: 16px;
+  gap: 32px;
   height: 100%;
   max-width: 500px;
-  padding: 16px 32px 16px 16px;
+  padding: 24px;
   user-select: none;
   background: @modal-gradient;
   &:extend(.round-corners);
 
   .confirmation-main {
     display: flex;
     gap: 16px;
+    margin-right: 24px;
 
     .icon-container {
-      color: 'blue';
-      padding: 3px 0;
+      color: @dark;
     }
 
     .body {
@@ -113,7 +113,7 @@ export default Vue.extend({
 
   .buttons {
     display: flex;
-    gap: 16px;
+    gap: 8px;
     width: 100%;
     justify-content: flex-end;
   }

diff --git a/components/views/media/heading/Heading.vue b/components/views/media/heading/Heading.vue
@@ -20,7 +20,9 @@ export default Vue.extend({
   watch: {
     webrtc: {
       handler() {
-        this.callTimeString = this.$dayjs(this.webrtc.callStartedAt).toNow(true)
+        this.callTimeString = formatDuration(
+          (Date.now() - this.webrtc.callStartedAt) / 1000,
+        )
       },
       deep: true,
     },

diff --git a/components/views/settings/modal/Modal.html b/components/views/settings/modal/Modal.html
@@ -43,6 +43,5 @@
         v-show="ui.settingsRoute === SettingsRoutes.PRIVACY_AND_PERMISSIONS"
       />
     </div>
-    <InteractablesClose data-cy="settings-close-button" :action="close" />
   </div>
 </UiModal>