feat: update form-field styles and add GitHub link to navigation

simonwep · Nov 10, 2023 · 2dc3801 · 2dc3801
1 parent 28f700b
commit 2dc3801
Show file tree

Hide file tree

Showing 15 changed files with 58 additions and 30 deletions.
diff --git a/src/app/components/base/alert/Alert.vue b/src/app/components/base/alert/Alert.vue
@@ -33,9 +33,9 @@ const theme = useThemeStyles(() => mapping[props.type][0]);
 .alert {
   display: flex;
   gap: 4px;
-  color: v-bind('theme.color.base');
-  border: 2px dashed v-bind('theme.color.base');
-  padding: 4px 6px;
+  color: v-bind('theme.text.base');
+  background: v-bind('theme.color.base');
+  padding: 8px 10px;
   font-weight: var(--font-weight-l);
   font-size: var(--font-size-xs);
   border-radius: var(--border-radius-m);

diff --git a/src/app/components/base/button/Button.vue b/src/app/components/base/button/Button.vue
@@ -72,7 +72,7 @@ const classes = computed(() => [
   color: v-bind('theme.text.base');
   border-radius: var(--border-radius-m);
   transition: all var(--transition-s);
-  padding: 8px 10px;
+  padding: 10px 10px;
 
   &.iconOnly {
     padding: 3px;
@@ -89,7 +89,7 @@ const classes = computed(() => [
 
   .text {
     width: 100%;
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-s);
     font-weight: var(--font-weight-l);
     line-height: 1em;
   }

diff --git a/src/app/components/base/dialog/Dialog.vue b/src/app/components/base/dialog/Dialog.vue
@@ -98,7 +98,7 @@ onMounted(() => {
 .content {
   background: var(--dialog-background);
   color: var(--theme-text);
-  padding: 10px 13px;
+  padding: 16px 18px;
   border-radius: var(--border-radius-l);
   box-shadow: var(--dialog-box-shadow);
 }

diff --git a/src/app/components/base/form/Form.vue b/src/app/components/base/form/Form.vue
@@ -27,7 +27,7 @@ const submit = (e: Event) => {
   display: flex;
   flex-direction: column;
   width: 250px;
-  gap: 8px;
+  gap: 12px;
   padding-top: 8px;
 
   .btn {

diff --git a/src/app/components/base/form/TextField.vue b/src/app/components/base/form/TextField.vue
@@ -91,10 +91,10 @@ const passwordBarColor = computed(() => {
 
 .inputBox {
   background: var(--input-field-background);
-  border: 1px dashed var(--input-field-border);
+  border: 1px solid var(--input-field-border);
   border-radius: var(--border-radius-m);
   height: 30px;
-  padding: 8px 12px;
+  padding: 16px 12px;
   display: flex;
   align-items: center;
   transition: all var(--input-field-transition);
@@ -115,12 +115,13 @@ const passwordBarColor = computed(() => {
   }
 
   &:hover:not(:focus-within) {
-    border: 1px dashed var(--input-field-hover-border);
+    border-color: var(--input-field-hover-border);
     background: var(--input-field-hover-background);
   }
 
   &:focus-within {
-    border: 1px dashed var(--input-field-focus-border);
+    box-shadow: 0 0 0 1px inset var(--input-field-hover-border);
+    border-color: var(--input-field-focus-border);
     background: var(--input-field-focus-background);
   }
 }
@@ -131,7 +132,7 @@ const passwordBarColor = computed(() => {
 }
 
 .error {
-  font-size: var(--font-size-xxs);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-l);
   border-radius: var(--border-radius-s);
   color: var(--c-danger);

diff --git a/src/app/components/base/icon/Icon.types.ts b/src/app/components/base/icon/Icon.types.ts
@@ -19,6 +19,7 @@ export type AppIcon =
   | 'eye-close'
   | 'eye-line'
   | 'file-fill'
+  | 'github-line'
   | 'global-line'
   | 'google-fill'
   | 'grid-line'

diff --git a/src/app/components/base/link/Link.vue b/src/app/components/base/link/Link.vue
@@ -1,5 +1,15 @@
 <template>
-  <RouterLink v-tooltip="{ text: tooltip, position: tooltipPosition }" :to="to" :class="classes">
+  <a
+    v-if="isExternalLink"
+    v-tooltip="{ text: tooltip, position: tooltipPosition }"
+    :href="to"
+    :class="classes"
+    target="_blank"
+  >
+    <Icon v-if="icon" :class="$style.icon" :icon="icon" />
+    <slot />
+  </a>
+  <RouterLink v-else v-tooltip="{ text: tooltip, position: tooltipPosition }" :to="to" :class="classes">
     <Icon v-if="icon" :class="$style.icon" :icon="icon" />
     <slot />
   </RouterLink>
@@ -31,15 +41,17 @@ const props = withDefaults(
 
 const slots = useSlots();
 const styles = useCssModule();
+const theme = useThemeStyles(() => props.color);
+
+const isExternalLink = computed(() => props.to.startsWith('http'));
+
 const classes = computed(() => [
   props.class,
   styles.link,
   {
     [styles.custom]: props.custom ?? slots.default
   }
 ]);
-
-const theme = useThemeStyles(() => props.color);
 </script>
 
 <style lang="scss" module>

diff --git a/src/app/pages/Frame.vue b/src/app/pages/Frame.vue
@@ -15,6 +15,16 @@
         :to="button.link"
       />
 
+      <template v-if="media !== 'mobile'">
+        <div :class="$style.divider" />
+        <Link
+          :tooltip="t('navigation.githubProject')"
+          color="dimmed"
+          to="https://github.com/simonwep/ocular"
+          icon="github-line"
+        />
+      </template>
+
       <ToolsButton :class="[$style.top, $style.btn]" />
       <AdminButton v-if="user?.admin" :class="$style.btn" />
       <SelectYearButton :class="$style.btn" />
@@ -37,6 +47,7 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { AppIcon } from '@components/base/icon/Icon.types';
+import Icon from '@components/base/icon/Icon.vue';
 import Link from '@components/base/link/Link.vue';
 import AnimatedRouterView from '@components/misc/animated-router-view/AnimatedRouterView.vue';
 import { useMediaQuery } from '@composables';

diff --git a/src/app/pages/navigation/auth/LoginDialog.vue b/src/app/pages/navigation/auth/LoginDialog.vue
@@ -1,6 +1,6 @@
 <template>
-  <Dialog :open="open" :title="t('auth.signIn')" @close="emit('close')">
-    <Form :submit-label="t('auth.signIn')" @submit="signIn">
+  <Dialog :open="open" :title="t('auth.welcomeBack')" @close="emit('close')">
+    <Form :submit-label="t('auth.welcomeBack')" @submit="signIn">
       <TextField v-model="username" required :label="t('auth.username')" type="text" />
       <TextField v-model="password" required :label="t('auth.password')" type="password" />
       <Alert v-if="state === 'errored'" :text="t('auth.errors.loginFailed')" type="error" />

diff --git a/src/app/pages/shared/pane/BudgetGroups.vue b/src/app/pages/shared/pane/BudgetGroups.vue
@@ -109,7 +109,7 @@ const reorder = (evt: ReorderEvent) => {
 }
 
 .month {
-  font-size: var(--font-size-xxs);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-m);
   padding-right: 20px;
   padding-bottom: 5px;

diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
@@ -23,8 +23,8 @@
     },
     "newPassword": "Neues Passwort",
     "password": "Passwort",
-    "signIn": "Anmelden",
-    "username": "Benutzername"
+    "username": "Benutzername",
+    "welcomeBack": "Willkommen zurück!"
   },
   "budget": {
     "addGroup": "Gruppe hinzufügen",
@@ -77,14 +77,15 @@
       "export": "Daten als JSON-Datei exportieren",
       "fileName": "Jährliches Budget"
     },
+    "githubProject": "Schau dir dieses Projekt auf GitHub an!",
     "import": {
       "google": {
         "expenses": "Ausgaben.csv",
         "income": "Einkünfte.csv"
       },
       "import": "Daten von einer JSON-Datei importieren",
       "ocular": {
-        "pickFile": ".budget-Datei auswählen"
+        "pickFile": ".json-Datei auswählen"
       },
       "start": {
         "google": "Eine Annual-Budget-Datei von Google-Sheets",

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -23,8 +23,8 @@
     },
     "newPassword": "New password",
     "password": "Password",
-    "signIn": "Sign in",
-    "username": "Username"
+    "username": "Username",
+    "welcomeBack": "Welcome back!"
   },
   "budget": {
     "addGroup": "Add Group",
@@ -77,14 +77,15 @@
       "export": "Export as JSON file",
       "fileName": "Annual Budget"
     },
+    "githubProject": "Check this project out on GitHub!",
     "import": {
       "google": {
         "expenses": "Expenses.csv",
         "income": "Income.csv"
       },
       "import": "Import from JSON file",
       "ocular": {
-        "pickFile": "Select your .budget file to import"
+        "pickFile": "Select your .json file to import"
       },
       "start": {
         "google": "Google-Sheets annual budget file",

diff --git a/src/icons/github-line.svg b/src/icons/github-line.svg
diff --git a/src/styles/themes/dark.scss b/src/styles/themes/dark.scss
@@ -122,10 +122,10 @@
   --input-field-placeholder: #5d6275;
   --input-field-background: var(--app-background);
 
-  --input-field-hover-border: var(--c-primary-hover);
+  --input-field-hover-border: var(--c-primary-pure);
   --input-field-hover-background: var(--input-field-background);
 
-  --input-field-focus-border: #0750b1;
+  --input-field-focus-border: var(--c-primary-pure);
   --input-field-focus-background: var(--input-field-background);
   --input-field-focus-box-shadow: 0 0 0 2px #005ad173;
 

diff --git a/src/styles/themes/light.scss b/src/styles/themes/light.scss
@@ -18,8 +18,8 @@
   --c-text-light-accent: #b8bbcc;
   --c-text-light-muted: #d2d2da;
 
-  --c-dimmed: #dfe4e9;
-  --c-dimmed-hover: #a2a9b4;
+  --c-dimmed: #a3aab0;
+  --c-dimmed-hover: #8f979d;
   --c-dimmed-text: var(--c-text-light);
   --c-dimmed-text-hover: var(--c-dimmed-text);
   --c-dimmed-text-accent: var(--c-text-light);
@@ -122,10 +122,10 @@
   --input-field-placeholder: var(--c-dimmed-pure);
   --input-field-background: #efeff3;
 
-  --input-field-hover-border: var(--c-dimmed-hover);
+  --input-field-hover-border: var(--c-primary-pure);
   --input-field-hover-background: var(--input-field-background);
 
-  --input-field-focus-border: #0059ffac;
+  --input-field-focus-border: var(--c-primary-pure);
   --input-field-focus-background: var(--input-field-background);
   --input-field-focus-box-shadow: #0059ff5c;