style: toolbar styles

Kong · Dec 28, 2023 · 803f173 · 803f173
1 parent 8280584
commit 803f173
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/src/assets/_mixins.scss b/src/assets/_mixins.scss
@@ -3,7 +3,7 @@
   background-color: var(--kui-color-background-transparent, $kui-color-background-transparent);
   border: var(--kui-border-width-20, $kui-border-width-20) solid
     var(--kui-color-border-transparent, $kui-color-border-transparent);
-  border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+  border-radius: var(--kui-border-radius-40, $kui-border-radius-40);
   color: var(--kui-color-text-neutral, $kui-color-text-neutral);
   cursor: pointer;
   display: inline-flex;

diff --git a/src/components/MarkdownUi.vue b/src/components/MarkdownUi.vue
@@ -392,12 +392,11 @@ const markdownEditorMaxHeight = computed((): string => `${props.editorMaxHeight}
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  gap: var(--kui-space-50, $kui-space-50);
+  margin-bottom: var(--kui-space-70, $kui-space-70);
+  padding-bottom: var(--kui-space-50, $kui-space-50);
   width: 100%;
 
-  @media (min-width: $kui-breakpoint-phablet) {
-    gap: var(--kui-space-0, $kui-space-0);
-  }
-
   .markdown-panes {
     box-sizing: border-box;
     display: flex;
@@ -420,6 +419,11 @@ const markdownEditorMaxHeight = computed((): string => `${props.editorMaxHeight}
   &.mode-edit,
   &.mode-split,
   &.mode-preview {
+    background-color: var(--kui-color-background-neutral-weakest, $kui-color-background-neutral-weakest);
+    border-color: var(--kui-color-border, $kui-color-border);
+    border-radius: var(--kui-border-radius-40, $kui-border-radius-40);
+    border-style: solid;
+    border-width: var(--kui-border-width-0, $kui-border-width-0) var(--kui-border-width-10, $kui-border-width-10) var(--kui-border-width-10, $kui-border-width-10) var(--kui-border-width-10, $kui-border-width-10);
 
     // Fullscreen mode only available when editing
     &.fullscreen {
@@ -441,9 +445,12 @@ const markdownEditorMaxHeight = computed((): string => `${props.editorMaxHeight}
     }
 
     .markdown-panes {
+      padding-left: var(--kui-space-50, $kui-space-50);
+      padding-right: var(--kui-space-50, $kui-space-50);
+
       .markdown-preview {
         border: $kui-border-width-10 solid $kui-color-border;
-        border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+        border-radius: var(--kui-border-radius-40, $kui-border-radius-40);
         // Hide the preview in edit mode on small screens
         display: none;
 
@@ -507,7 +514,7 @@ const markdownEditorMaxHeight = computed((): string => `${props.editorMaxHeight}
     appearance: none;
     background-color: var(--kui-color-background, $kui-color-background);
     border: 0;
-    border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+    border-radius: var(--kui-border-radius-40, $kui-border-radius-40);
     box-shadow: var(--kui-shadow-border, $kui-shadow-border); // Ensure the padding is calculated in the element's width
     box-sizing: border-box; // Ensure the padding is calculated in the element's width
     color: var(--kui-color-text, $kui-color-text);

diff --git a/src/components/toolbar/MarkdownToolbar.vue b/src/components/toolbar/MarkdownToolbar.vue
@@ -4,7 +4,7 @@
     class="markdown-ui-toolbar"
   >
     <div class="toolbar-left">
-      <div
+      <!-- <div
         v-if="editable && mode !== 'read'"
         class="button-group"
       >
@@ -31,9 +31,9 @@
         >
           Preview
         </button>
-      </div>
+      </div> -->
 
-      <template v-if="editable && mode !== 'read'">
+      <template v-if="editable && !['preview', 'read'].includes(mode)">
         <InfoTooltip
           v-for="option in formatOptions"
           :key="option.label"
@@ -95,10 +95,10 @@
         :data-testid="`tooltip-fullscreen`"
       >
         <template #tooltip>
-          {{ fullscreen ? 'Exit fullscreen editor' : 'Enter fullscreen editor' }}
+          {{ fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen' }}
         </template>
         <IconButton
-          :aria-label="fullscreen ? 'Exit fullscreen editor' : 'Enter fullscreen editor'"
+          :aria-label="fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'"
           data-testid="toggle-fullscreen"
           :tabindex="0"
           @click.prevent="toggleFullscreen"
@@ -278,11 +278,17 @@ onMounted(() => {
 <style lang="scss" scoped>
 .markdown-ui-toolbar {
   align-items: center;
-  background-color: var(--kui-color-background, $kui-color-background);
+  background-color: var(--kui-color-background-neutral-weakest, $kui-color-background-neutral-weakest);
+  border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+  border-top: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+  border-top-left-radius: var(--kui-border-radius-40, $kui-border-radius-40);
+  border-top-right-radius: var(--kui-border-radius-40, $kui-border-radius-40);
   display: flex;
   gap: var(--kui-space-70, $kui-space-70);
   height: v-bind('TOOLBAR_HEIGHT');
   justify-content: space-between;
+  padding-left: var(--kui-space-50, $kui-space-50);
+  padding-right: var(--kui-space-50, $kui-space-50);
   // Allowing the toolbar to scroll horizontally will hide the keyboard shortcut tooltips
   // which is fine on mobile since keyboard nav isn't as relevant there.
   // overflow-x: auto; // TODO: Enable for horizontal scrolling
@@ -326,7 +332,6 @@ onMounted(() => {
     align-items: center;
     display: flex;
     gap: var(--kui-space-20, $kui-space-20);
-    padding: var(--kui-space-40, $kui-space-40) var(--kui-space-0, $kui-space-0);
   }
 
   .toolbar-divider {