diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index a13ca94b68..ebdd92ce0d 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -159,8 +159,6 @@ --radio-btn-foreground-color-selected: var(--color-accent-primary); --radio-btn-border-color-selected: var(--color-background-quaternary); - --modal-background-color: var(--color-background-primary); - --library-name-foreground-color: var(--color-foreground-primary); --library-content-foreground-color: var(--color-foreground-secondary); @@ -188,7 +186,7 @@ --user-count-background-color: var(--color-background-secondary); --user-count-foreground-color: var(--color-accent-primary); - --modal-background-color: var(--color-background-quaternary); + --modal-background-color: var(--color-background-primary); --modal-foreground-color: var(--color-foreground-primary); --modal-foreground-color-secondary: var(--color-foreground-secondary); } diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss index e7c4527095..c54c576121 100644 --- a/frontend/resources/styles/common/refactor/mixins.scss +++ b/frontend/resources/styles/common/refactor/mixins.scss @@ -30,6 +30,13 @@ } @mixin titleTipography { + font-family: "worksans", sans-serif; + font-size: $fs-12; + font-weight: $fw400; + line-height: 1.2; +} + +@mixin titleBigTipography { font-family: "worksans", sans-serif; font-size: $fs-14; font-weight: $fw400; diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index 7fb78cd999..029015e5c9 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -27,7 +27,7 @@ color: var(--title-foreground-color); } .title-only { - margin-left: $s-8; + // margin-left: $s-8; } .toggle-btn { diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss index a80349e9a6..b85729050d 100644 --- a/frontend/src/app/main/ui/workspace/left_header.scss +++ b/frontend/src/app/main/ui/workspace/left_header.scss @@ -32,11 +32,12 @@ height: $s-16; width: 100%; padding-bottom: $s-2; + margin-top: -2px; color: var(--title-foreground-color); cursor: pointer; } .file-name { - @include titleTipography; + @include titleBigTipography; text-transform: none; color: var(--title-foreground-color-hover); } diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.css.json b/frontend/src/app/main/ui/workspace/left_toolbar.css.json index 63277a0278..e44ecc0cf9 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.css.json +++ b/frontend/src/app/main/ui/workspace/left_toolbar.css.json @@ -1 +1 @@ -{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","menu-dropdown":"workspace_left_toolbar_menu-dropdown_ui5fQ","menu-item":"workspace_left_toolbar_menu-item_chrVQ","shortcut":"workspace_left_toolbar_shortcut_9jPGH","shortcut-key":"workspace_left_toolbar_shortcut-key_MUfgG","user-icon":"workspace_left_toolbar_user-icon_C8ZY7","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk","spin-animation":"workspace_left_toolbar_spin-animation_8Q3nv"} \ No newline at end of file +{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","menu-dropdown":"workspace_left_toolbar_menu-dropdown_ui5fQ","menu-item":"workspace_left_toolbar_menu-item_chrVQ","shortcut":"workspace_left_toolbar_shortcut_9jPGH","shortcut-key":"workspace_left_toolbar_shortcut-key_MUfgG","user-icon":"workspace_left_toolbar_user-icon_C8ZY7","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk","spin-animation":"workspace_left_toolbar_spin-animation_8Q3nv"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.scss b/frontend/src/app/main/ui/workspace/left_toolbar.scss index e478db05ff..6dc12cb926 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.scss +++ b/frontend/src/app/main/ui/workspace/left_toolbar.scss @@ -18,7 +18,7 @@ border-radius: $s-8; z-index: $z-index-2; background-color: var(--color-background-primary); - transition: top 1s, height 1s, opacity 1s; + transition: top 0.3s, height 0.3s, opacity 0.3s; .main-toolbar-options { position: relative; @@ -26,18 +26,19 @@ align-items: center; margin: 0; opacity: $op-10; - transition: opacity 1s ease; + transition: opacity 0.3s ease; li { position: relative; button { - @extend .button-primary; + @extend .button-tertiary; height: $s-36; width: $s-36; flex-shrink: 0; background-color: transparent; border-radius: $s-8; border: none; + margin: 0 $s-2; svg { @extend .button-icon; diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index b117b0193a..06e330f261 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/frontend/src/app/main/ui/workspace/libraries.scss @@ -5,6 +5,7 @@ // Copyright (c) KALEIDOS INC @import "refactor/common-refactor.scss"; + .modal-overlay { @include flexCenter; position: fixed; @@ -15,6 +16,7 @@ z-index: $z-index-modal; background-color: var(--overlay-color); pointer-events: none; // This is to allow outside click that closes modal. + .modal-dialog { position: relative; height: $s-520; @@ -50,11 +52,13 @@ .updates-content { display: grid; grid-template-columns: 1fr 1fr; - gap: $s-24; + gap: $s-32; padding-top: $s-24; height: 100%; max-height: $s-400; .section { + display: flex; + flex-direction: column; height: calc(100% - $s-12); :global(.title-spacing-lib) { margin: 0 0 $s-24 calc(-1 * $s-8); @@ -63,8 +67,8 @@ .section-list-shared { height: 100%; max-height: $s-320; + margin-top: $s-12; overflow: auto; - scrollbar-gutter: stable; .section-list-item { display: grid; grid-template-columns: 1fr auto; @@ -128,7 +132,7 @@ margin-bottom: $s-12; } .libraries-search { - margin-bottom: $s-12; + margin: $s-12 0; .search-icon { @include flexCenter; padding: 0 0 0 $s-8; diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss index 692b9689ff..3a9d2cb837 100644 --- a/frontend/src/app/main/ui/workspace/palette.scss +++ b/frontend/src/app/main/ui/workspace/palette.scss @@ -30,7 +30,7 @@ padding: $s-0 $s-0 $s-8 $s-8; border-radius: $br-8; background-color: var(--palette-background-color); - transition: right 1s, opacity 1s, width 1s; + transition: right 0.3s, opacity 0.2s, width 0.3s; &.wide { width: 100%; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index 43852c6d2f..d4f67b6951 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -21,6 +21,7 @@ margin-top: $s-2; margin-bottom: $s-4; padding-right: $s-8; + margin-left: $s-8; .page-name { @include tabTitleTipography; padding: 0 $s-12;