diff --git a/src/app/components/base/alert/Alert.vue b/src/app/components/base/alert/Alert.vue index 56cc677e..6c35408b 100644 --- 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 index a95b4476..c292bef1 100644 --- 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 index 579d76e9..5665cb54 100644 --- 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 index e48b38d5..e2e0b001 100644 --- 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 index f051b162..21daac57 100644 --- 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 index f2ed95ba..efbea507 100644 --- 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 index 0931c65e..8c9e20c6 100644 --- a/src/app/components/base/link/Link.vue +++ b/src/app/components/base/link/Link.vue @@ -1,5 +1,15 @@