Merge pull request #153 from mergestat/sync-styles

Sync styles
mergestat · Mar 24, 2023 · e80871f · e80871f
2 parents 511c64b + e331f7b
commit e80871f
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 21 deletions.
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mergestat/blocks",
-  "version": "1.5.63",
+  "version": "1.5.64",
   "description": "Set of UI components for MergeStat project",
   "license": "MIT",
   "repository": {

diff --git a/packages/blocks/src/components/marketing/MarketingAccordion/MarketingAccordion.stories.tsx b/packages/blocks/src/components/marketing/MarketingAccordion/MarketingAccordion.stories.tsx
@@ -16,7 +16,7 @@ const data = [
   {
     title: 'First item',
     desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eros, suspendisse eu lobortis ut tempus hendrerit pellentesque amet.',
-    cta: <Button component='a' skin='borderless' label='Learn More' endIcon={<ChevronRightIcon className='t-icon'/>} href='https://docs.mergestat.com/' />,
+    cta: <Button skin='borderless' label='Learn More' endIcon={<ChevronRightIcon className='t-icon'/>} href='https://docs.mergestat.com/' />,
     content:
       <>
         <MarketingHighlight>What are the most common vulnerabilities?</MarketingHighlight>
@@ -34,7 +34,7 @@ ORDER BY count(*) DESC`}
   {
     title: 'Second item',
     desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eros, suspendisse eu lobortis ut tempus hendrerit pellentesque amet.',
-    cta: <Button component='a' skin='borderless' label='Learn More' endIcon={<ChevronRightIcon className='t-icon'/>} href='https://docs.mergestat.com/' />,
+    cta: <Button skin='borderless' label='Learn More' endIcon={<ChevronRightIcon className='t-icon'/>} href='https://docs.mergestat.com/' />,
     content:
       <>
         <MarketingHighlight>What are the most common vulnerabilities?</MarketingHighlight>
@@ -60,7 +60,7 @@ ORDER BY count(*) DESC`}
   {
     title: 'Fourth item',
     desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eros, suspendisse eu lobortis ut tempus hendrerit pellentesque amet.',
-    cta: <Button component='a' skin='borderless' label='Learn More' endIcon={<ChevronRightIcon className='t-icon'/>} href='https://docs.mergestat.com/' />,
+    cta: <Button skin='borderless' label='Learn More' endIcon={<ChevronRightIcon className='t-icon'/>} href='https://docs.mergestat.com/' />,
     content:
       <>
         <MarketingHighlight>What are the most common vulnerabilities?</MarketingHighlight>
@@ -72,7 +72,7 @@ ORDER BY count(*) DESC`}
   {
     title: 'Fifth item',
     desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eros, suspendisse eu lobortis ut tempus hendrerit pellentesque amet.',
-    cta: <Button component='a' skin='borderless' label='Learn More' endIcon={<ChevronRightIcon className='t-icon'/>} href='https://docs.mergestat.com/' />,
+    cta: <Button skin='borderless' label='Learn More' endIcon={<ChevronRightIcon className='t-icon'/>} href='https://docs.mergestat.com/' />,
     content:
       <>
         <MarketingHighlight>What are the most common vulnerabilities?</MarketingHighlight>
@@ -95,7 +95,7 @@ ORDER BY count(*) DESC`}
   {
     title: 'Seventh item',
     desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eros, suspendisse eu lobortis ut tempus hendrerit pellentesque amet.',
-    cta: <Button component='a' skin='borderless' label='Learn More' endIcon={<ChevronRightIcon className='t-icon'/>} href='https://docs.mergestat.com/' />,
+    cta: <Button skin='borderless' label='Learn More' endIcon={<ChevronRightIcon className='t-icon'/>} href='https://docs.mergestat.com/' />,
     content:
       <>
         <MarketingHighlight>What are the most common vulnerabilities?</MarketingHighlight>

diff --git a/packages/blocks/src/components/marketing/MarketingAccordion/MarketingAccordion.tsx b/packages/blocks/src/components/marketing/MarketingAccordion/MarketingAccordion.tsx
@@ -35,10 +35,14 @@ export const MarketingAccordion: React.FC<MarketingAccordionProps & React.HTMLAt
                         </button>
                           { selected &&
                             <>
-                              <div className='t-marketing-accordion-desc'>{item.desc}
-                                <div className='mt-3'>
-                                  {item.cta}
-                                </div>
+                              <div className='t-marketing-accordion-desc'>
+
+                                {item.desc &&
+                                <div className='mb-3'>
+                                  {item.desc}
+                                </div>}
+                                {item.cta}
+
                               </div>
                               <div className='t-marketing-accordion-mobile-content'>{item.content}</div>
                             </>

diff --git a/packages/blocks/styles/components/t-avatar.css b/packages/blocks/styles/components/t-avatar.css
@@ -39,6 +39,17 @@
            h-4;
 }
 
+
+.md_t-avatar-md {
+  @apply md_h-10
+         md_w-10;
+}
+
+.md_t-avatar-md .t-icon {
+  @apply md_w-6
+         md_h-6;
+}
+
 .t-avatar-lg {
     @apply h-12
            w-12;

diff --git a/packages/blocks/styles/components/t-checkbox-radio.css b/packages/blocks/styles/components/t-checkbox-radio.css
@@ -32,11 +32,14 @@
            h-4
            bg-white
            border
+           flex-none
            border-gray-300;
 }
 
 .t-checkbox input[type="checkbox"] + span,
-.t-radio input[type="radio"] + span {
+.t-radio input[type="radio"] + span,
+.t-checkbox input[type="checkbox"] + label,
+.t-radio input[type="radio"] + label {
     @apply ml-2;
 }
 
@@ -54,6 +57,17 @@
            items-center;
 }
 
+.t-checkbox-large input[type="checkbox"],
+.t-radio-large input[type="radio"] {
+    @apply w-5
+           h-5;
+}
+
+.t-checkbox-group .t-checkbox-large,
+.t-radio-group .t-radio-large {
+  @apply py-1.5;
+}
+
 /* Checkbox specific */
 .t-checkbox input[type="checkbox"] {
     @apply rounded;

diff --git a/packages/blocks/styles/components/t-display.css b/packages/blocks/styles/components/t-display.css
@@ -44,31 +44,31 @@
 
 .t-display-2,
 .t-display h2 {
-    @apply text-2xl
+    @apply text-3xl
            sm_text-4xl
            leading-tight
            mb-5;
 }
 
 .t-display-3,
 .t-display h3 {
-    @apply text-lg
-           sm_text-2xl
+    @apply text-2xl
+           sm_text-3xl
            leading-tight
            mb-4;
 }
 
 .t-display-4,
 .t-display h4 {
-    @apply text-base
-           sm_text-lg
+    @apply text-lg
+           sm_text-xl
            font-semibold
            mb-2;
 }
 
 .t-display-5,
 .t-display h5 {
-    @apply text-sm
+    @apply text-base
            font-semibold
            mb-1;
 }
@@ -80,8 +80,8 @@
 
 .t-display-body,
 .t-display p {
-    @apply text-sm
-           sm_text-base
+    @apply text-base
+           sm_text-lg
            leading-7;
 }
 

diff --git a/packages/blocks/styles/components/t-label.css b/packages/blocks/styles/components/t-label.css
@@ -10,8 +10,9 @@
          leading-6;
 }
 
-.t-label-req,
+.t-label-req ,
 .t-label em {
    @apply ml-1
+          not-italic
           text-red-600;
 }
diff --git a/packages/blocks/styles/components/t-master-detail.css b/packages/blocks/styles/components/t-master-detail.css
@@ -0,0 +1,52 @@
+/* ==========================================================================
+   t-master-detail
+   ========================================================================== */
+
+.t-master-detail-list {
+  @apply bg-gray-50;
+}
+
+.t-master-detail-item {
+  @apply px-6
+         text-left
+         bg-white
+         border-b
+         border-gray-150
+         text-gray-900
+         py-4
+         w-full
+         hover_bg-gray-50;
+}
+
+.t-master-detail-item-active {
+  @apply relative
+         bg-gray-50
+         py-4;
+}
+
+.t-master-detail-item-title {
+  @apply font-medium
+         text-gray-600
+         text-sm
+         mb-2;
+}
+
+.t-master-detail-item-preview {
+  @apply font-mono
+         text-xs
+         text-gray-450;
+}
+
+.t-master-detail-item-active .t-master-detail-item-title {
+  @apply text-blue-600;
+}
+
+.t-master-detail-item-active:after {
+  content: '';
+  @apply left-0
+         top-0
+         w-1
+         h-full
+         absolute
+         bg-blue-500;
+}
diff --git a/packages/blocks/styles/main.css b/packages/blocks/styles/main.css
@@ -27,6 +27,7 @@
 @import "./components/t-list-item.css";
 @import "./components/t-list.css";
 @import "./components/t-log-box.css";
+@import "./components/t-master-detail.css";
 @import "./components/t-menu.css";
 @import "./components/t-modal.css";
 @import "./components/t-multi-select.css";

diff --git a/packages/blocks/styles/marketing/t-marketing-accordion.css b/packages/blocks/styles/marketing/t-marketing-accordion.css
@@ -57,7 +57,9 @@
 }
 
 .t-marketing-accordion-title {
-  @apply font-semibold
+  @apply text-base
+         sm_text-xl
+         font-semibold
          text-gray-900
          flex
          w-full;

diff --git a/packages/blocks/styles/marketing/t-marketing-highlight.css b/packages/blocks/styles/marketing/t-marketing-highlight.css
@@ -1,6 +1,8 @@
 .t-marketing-highlight {
   @apply bg-blue-500
          border-blue-600
+         text-sm
+         sm_text-base
          border
          inline-block
          text-white