Layout and style updates wip

Author: rogden

src/components/Canvas/Canvas.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="bg-gray-100">
     <div
       v-if="!config"
       style="height: calc(100vh - 63px);"
@@ -10,7 +10,7 @@
           p-16
           max-w-sm
           rounded-lg
-          border-2 border-dashed border-bg-gray-200"
+          border-2 border-dashed border-bg-gray-200 bg-white"
       >
         <p class="mb-3 text-gray-600 text-center font-bold">Upload your Tailwind config file</p>
         <input
@@ -19,23 +19,22 @@
           name="file"
           class="absolute opacity-0 w-0 h-0 overflow-hidden"
           @change="fileSelected">
-        <label for="file" class="inline-block p-4 bg-blue-400 hover:bg-blue-500 rounded cursor-pointer text-center text-white">Upload Tailwind Config</label>
+        <label for="file" class="inline-block p-4 bg-teal-500 hover:bg-teal-600 rounded cursor-pointer text-center text-white">Upload Tailwind Config</label>
       </form>
     </div>
     <template v-if="config">
       <div class="pt-8 flex">
-        <nav class="w-56 flex-none px-3 h-full top-0 sticky">
-          <h2 class="font-bold text-lg">Sections</h2>
+        <nav class="w-56 flex-none pt-12 px-3 h-full top-0 sticky">
           <a
             v-for="section in configTransformed"
             :key="section.title"
             :href="`#${section.title}`"
-            class="block py-2 px-3 text-gray-600 hover:text-gray-900 hover:bg-gray-200 text-lg rounded-sm"
+            class="block py-2 px-3 text-gray-600 hover:text-teal-600 hover:bg-teal-200 hover:opacity-25 text-base rounded-sm"
           >
             {{ section.title }}
           </a>
         </nav>
-        <div>
+        <div class="pr-4">
           <CanvasSection v-for="section in configTransformed" :key="section.title" :title="section.title" :id="section.title">
             <component :is="sectionComponent(section.component)" :data="section.data" />
           </CanvasSection>

src/components/Canvas/CanvasSection.vue

@@ -1,7 +1,9 @@
 <template>
-  <section class="mb-16">
-    <h1 class="mb-6 border-b text-4xl text-gray-800">{{ title }}</h1>
-    <slot />
+  <section class="mb-16 max-w-full">
+    <h1 class="mb-2 text-4xl text-gray-800">{{ title }}</h1>
+    <div class="bg-white p-6 rounded shadow-xl">
+      <slot />
+    </div>
   </section>
 </template>
 

src/components/Canvas/Sections/BorderRadius.vue

@@ -2,10 +2,9 @@
   <div class="flex">
     <div
       v-for="(value, prop) in data"
-      class="mr-4"
+      class="mr-4 bg-gray-400"
       :key="prop"
       :style="{
-        backgroundColor: '#ccc',
         width: '100px',
         height: '100px',
         borderRadius: value

src/components/Canvas/Sections/BorderWidth.vue

@@ -3,13 +3,11 @@
     <div
       v-for="(value, prop) in data"
       :key="prop"
-      class="mr-2"
+      class="mr-2 bg-gray-400 border-gray-600"
       :style="{
-        backgroundColor: '#ccc',
         height: '100px',
         width: '100px',
-        borderBottomWidth: value,
-        borderColor: '#666'
+        borderWidth: value
       }">
       {{ prop }}
     </div>

src/components/Canvas/Sections/FontSizes.vue

@@ -2,12 +2,12 @@
   <div class="">
     <div
       v-for="(value, prop) in data"
-      class="mb-3"
+      class="mb-4 leading-none"
       :key="prop"
       :style="{
         fontSize: value
       }">
-      <div class="text-sm">text-{{ prop }}</div>
+      <div class="text-sm mb-2">text-{{ prop }}</div>
       <p>The quick brown fox jumped over the lazy dog.</p>
     </div>
   </div>

src/components/Canvas/Sections/Height.vue

@@ -3,14 +3,18 @@
     <div
       v-for="(value, prop) in data"
       :key="prop"
-      class="mr-2"
+      class="mr-4 mb-4"
     >
-      <div>{{ prop }}</div>
-      <div :style="{
-        backgroundColor: '#ccc',
-        width: '100px',
-        height: value
-      }" />
+      <div>h-{{ prop }}</div>
+      <div class="bg-gray-200 h-full">
+        <div
+          class="bg-gray-400"
+          :style="{
+            width: '100px',
+            height: value
+          }"
+        />
+      </div>
     </div>
   </div>
 </template>

src/components/Canvas/Sections/LetterSpacing.vue

@@ -5,7 +5,7 @@
       class="mb-3"
       :key="prop"
       >
-        <div class="text-sm">{{ prop }}</div>
+        <div class="text-sm">tracking-{{ prop }}</div>
         <p
           class="text-xl"
           :style="{

src/components/Canvas/Sections/LineHeight.vue

@@ -5,7 +5,7 @@
       class="mb-3"
       :key="prop"
       >
-        <div class="text-sm">{{ prop }}</div>
+        <div class="text-sm">leading-{{ prop }}</div>
         <div
           class="text-lg"
           :style="{

src/components/Canvas/Sections/Opacity.vue

@@ -6,8 +6,9 @@
       class="mr-2"
     >
       <div>{{ prop }}</div>
-      <div :style="{
-        backgroundColor: '#ccc',
+      <div
+        class="bg-gray-400"
+        :style="{
         width: '100px',
         height: '100px',
         opacity: value

src/components/Canvas/Sections/Screens.vue

@@ -3,9 +3,8 @@
     <div
       v-for="(value, prop) in data"
       :key="prop"
-      class="mb-4"
+      class="mb-4 bg-gray-400"
       :style="{
-        backgroundColor: '#ccc',
         maxWidth: value,
         height: '100px',
       }">