Merge pull request #43 from brainstormforce/STAR-151-stc

STAR-151: Design changes in Site Grid Components
brainstormforce · Jul 26, 2023 · 26163c9 · 26163c9
2 parents b786764 + 8206533
commit 26163c9
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 47 deletions.
diff --git a/build/index.js b/build/index.js
diff --git a/src/grid/index.js b/src/grid/index.js
@@ -48,10 +48,6 @@ const Grid = ( {
 						key={ index }
 					>
 						<div className="stc-grid-item-inner">
-							{ item.badge ? (
-								<PremiumBadge badge={ item.badge } />
-							) : null }
-
 							{ enableNewUi ? (
 								<div className="stc-grid-item-screenshot-wrap">
 									<a href={ item.link } rel="noreferrer">
@@ -81,6 +77,9 @@ const Grid = ( {
 							<div className="stc-grid-item-header">
 								<div className="stc-grid-item-title">
 									{ decodeEntities( item.title ) }
+									{ item.badge ? (
+										<PremiumBadge badge={ item.badge } />
+									) : null }
 								</div>
 
 								{ item.desc ? (

diff --git a/src/grid/style.scss b/src/grid/style.scss
@@ -110,22 +110,6 @@
 	}
 }
 
-.stc-grid-item-badge {
-	background: #FFC107;
-	color: #000;
-	padding: 4px 12px;
-	font-size: var( --stc-font-size-xxs );
-	top: -4px;
-	right: -4px;
-	text-transform: uppercase;
-    position: absolute;
-    z-index: 1;
-    border-radius: var(--stc-border-radius-2);
-    font-weight: var(--stc-font-weight-extra-bold);
-    letter-spacing: 0.3px;
-    z-index: 4;
-}
-
 .stc-grid-favorite {
 	svg {
 		width: 16px;

diff --git a/src/premium-badge/index.js b/src/premium-badge/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { __ } from '@wordpress/i18n';
-import './style.scss';
 
 const PremiumBadge = ( { badge } ) => {
 	return (

diff --git a/src/premium-badge/style.scss b/src/premium-badge/style.scss
diff --git a/src/search/style.scss b/src/search/style.scss
@@ -7,15 +7,13 @@
 
 	.stc-search-input {
 		width: 740px;
-		padding: 16px 22px 16px 44px;
+		padding: 5px 15px;
 		opacity: 1;
 		font-size: var(--stc-font-size-s);
 		border: var( --stc-search-input-border, none );
-		font-weight: var(--stc-font-weight-normal);
-		border-radius: var(--stc-border-radius-4, 4px);
-		background: var(--stc-background-primary);
-		box-shadow: var( --stc-search-input-box-shadow, 0px 0px 4px -1px rgb(0 0 0 / 6%), 0px 2px 6px -1px rgb(0 0 0 / 10%) );
-		height: var( --stc-search-input-height, 62px );
+		background: var(--stc-background-primary, #FFF);
+		box-shadow: 0px 10px 65px -10px rgba(0, 0, 0, 0.12);
+		height: var( --stc-search-input-height, 50px );
 
 		&:focus {
 			outline: none;
@@ -25,7 +23,8 @@
 		&:hover,
 		&:active,
 		&:focus {
-			box-shadow: 0px 2px 6px -1px rgb(0 0 0 / 6%), 0px 4px 8px -1px rgb(0 0 0 / 10%);
+			box-shadow: 0px 10px 65px -10px rgba(0, 0, 0, 0.12);
+
 		}
 
 		&::-webkit-input-placeholder {

diff --git a/src/style.scss b/src/style.scss
@@ -6,12 +6,13 @@ body {
     --stc-color-heading: #1F2937;
     --stc-color-body: #4B5563;
     --stc-color-light-gray: #E5E7EB;
-    --stc-color-placeholder: #6B7280;
+    --stc-color-placeholder: #BDBDC7;
     --stc-color-white: #FFFFFF;
     --stc-color-favorite: #E91E63;
     --stc-background-secondary: #F7F7F9;
     --stc-background-primary: #FFFFFF;
     --stc-background-light: #F9FAFB;
+    --stc-icon-color: #C6C6D1;
 
     /* Font sizes */
     --stc-font-size-xxl: 30px;

diff --git a/src/toggle-dropdown/index.js b/src/toggle-dropdown/index.js
@@ -6,7 +6,14 @@ import './style.scss';
 import { Logo } from '../index';
 import { ICONS } from '../icons';
 
-const ToggleDropdown = ( { label, options, className, value, onClick } ) => {
+const ToggleDropdown = ( {
+	label,
+	options,
+	className,
+	value,
+	onClick,
+	icon,
+} ) => {
 	const [ state, setState ] = useState( {
 		option: {
 			id: '',
@@ -76,7 +83,7 @@ const ToggleDropdown = ( { label, options, className, value, onClick } ) => {
 					</>
 				) }
 
-				{ ICONS.dropdown }
+				{ icon ? icon : ICONS.dropdown }
 			</div>
 			{ toggle && (
 				<div className="stc-toggle-dropdown-popup">

diff --git a/src/toggle-dropdown/style.scss b/src/toggle-dropdown/style.scss
@@ -25,7 +25,7 @@
 .stc-toggle-dropdown-popup-item {
 	margin: var( --stc-toggle-dropdown-popup-item-margin, 0 0 5px 0 );
     cursor: var( --stc-toggle-dropdown-popup-item-cursor, initial );
-	padding: var( --stc-toggle-dropdown-popup-item-padding, 12px 22px );
+	padding: var( --stc-toggle-dropdown-popup-item-padding, 12px 8px );
     margin-bottom: 0;
 
 	&:last-child {