Font size and spacing related changes for card and button

prajapati-parth · Sep 24, 2023 · 7c53257 · 7c53257
1 parent bd7dce6
commit 7c53257
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 79 deletions.
diff --git a/output/bundle.min.js b/output/bundle.min.js
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled, { ThemeProvider } from 'styled-components';
+import React from "react";
+import PropTypes from "prop-types";
+import styled, { ThemeProvider } from "styled-components";
 
-import commonTheme from '../../theme/eurekaui-theme';
+import commonTheme from "../../theme/eurekaui-theme";
 
 const propTypes = {
   /**
@@ -16,7 +16,7 @@ const propTypes = {
   /**
    * Click event handler
    */
-  click: PropTypes.func.isRequired
+  click: PropTypes.func.isRequired,
 };
 
 const SButton = styled.button`
@@ -29,41 +29,41 @@ const SButton = styled.button`
   background-image: none;
   border: none;
   white-space: nowrap;
-  margin: 0 2px;
-  padding: ${props => `${props.theme.button.paddingBaseVertical} ${props.theme.button.paddingBaseHorizontal}` };
-  background-image: ${props => {
-    switch(props.themeColor) {
-      case 'blueGradient':
+  padding: ${(props) =>
+    `${props.theme.button.paddingBaseVertical} ${props.theme.button.paddingBaseHorizontal}`};
+  background-image: ${(props) => {
+    switch (props.themeColor) {
+      case "blueGradient":
         return `linear-gradient(135deg, ${props.theme.colors.blueGradientStart}, ${props.theme.colors.blueGradientEnd})`;
         break;
-      case 'greenGradient':
+      case "greenGradient":
         return `linear-gradient(135deg, ${props.theme.colors.greenGradientStart}, ${props.theme.colors.greenGradientEnd})`;
         break;
-      case 'pinkGradient':
+      case "pinkGradient":
         return `linear-gradient(135deg, ${props.theme.colors.pinkGradientStart}, ${props.theme.colors.pinkGradientEnd})`;
         break;
       default:
         return `linear-gradient(135deg, ${props.theme.colors.themeDefault}, ${props.theme.colors.themeDefault})`;
     }
   }};
-  color: ${props => props.theme.colors.themeWhiteBase};
-  border-radius: ${props => props.theme.button.borderRadius};
-  font-size: 18px;
+  color: ${(props) => props.theme.colors.themeWhiteBase};
+  border-radius: ${(props) => props.theme.button.borderRadius};
+  font-size: 16px;
   font-family: inherit;
 
   &:focus,
   &:active,
   &:hover {
     outline: none;
-    background-image: ${props => {
-      switch(props.themeColor) {
-        case 'blueGradient':
+    background-image: ${(props) => {
+      switch (props.themeColor) {
+        case "blueGradient":
           return `linear-gradient(135deg, ${props.theme.colors.blueGradientEnd}, ${props.theme.colors.blueGradientStart})`;
           break;
-        case 'greenGradient':
+        case "greenGradient":
           return `linear-gradient(135deg, ${props.theme.colors.greenGradientEnd}, ${props.theme.colors.greenGradientStart})`;
           break;
-        case 'pinkGradient':
+        case "pinkGradient":
           return `linear-gradient(135deg, ${props.theme.colors.pinkGradientEnd}, ${props.theme.colors.pinkGradientStart})`;
           break;
         default:
@@ -84,12 +84,17 @@ class Button extends React.Component {
 
     return (
       <ThemeProvider theme={commonTheme}>
-        <SButton onClick={(event) => this.buttonClick(event)} themeColor={theme}>{text}</SButton>
+        <SButton
+          onClick={(event) => this.buttonClick(event)}
+          themeColor={theme}
+        >
+          {text}
+        </SButton>
       </ThemeProvider>
-    )
+    );
   }
 }
 
 Button.propTypes = propTypes;
 
-export default Button;
+export default Button;
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled, { ThemeProvider, css } from 'styled-components';
+import React from "react";
+import PropTypes from "prop-types";
+import styled, { ThemeProvider, css } from "styled-components";
 
-import commonTheme from '../../theme/eurekaui-theme';
-import Button from '../Button';
+import commonTheme from "../../theme/eurekaui-theme";
+import Button from "../Button";
 
 const propTypes = {
   /**
@@ -37,48 +37,52 @@ const propTypes = {
   /**
    * alt prop for image
    */
-   alt: PropTypes.string,
+  alt: PropTypes.string,
 };
 
 const defaultProps = {
   borderNone: true,
   categories: [],
-  alt: '',
+  alt: "",
 };
 
 const SCard = styled.div`
-  background-color: ${props => props.theme.colors.themeWhiteBase};
+  background-color: ${(props) => props.theme.colors.themeWhiteBase};
   border-radius: 5px;
-  transition: all .5s;
+  transition: all 0.5s;
   margin: 12px 0;
-  border: ${props => props.borderNone ? 'none' : `1px solid ${props.theme.colors.borderColor}`};
-  border-top: ${props => {
-    switch(props.themeColor) {
-      case 'blueGradient':
+  border: ${(props) =>
+    props.borderNone ? "none" : `1px solid ${props.theme.colors.borderColor}`};
+  border-top: ${(props) => {
+    switch (props.themeColor) {
+      case "blueGradient":
         return `8px solid ${props.theme.colors.blueGradientStart}`;
-      case 'greenGradient':
+      case "greenGradient":
         return `8px solid ${props.theme.colors.greenGradientStart}`;
-      case 'pinkGradient':
+      case "pinkGradient":
         return `8px solid ${props.theme.colors.pinkGradientStart}`;
     }
   }};
 
-  ${props => props.onClick && css`
-  &:hover {
-    cursor: pointer;
-    box-shadow: 0 4px 6px 0px hsla(0, 0%, 0%, 0.2);
-  }`}
+  ${(props) =>
+    props.onClick &&
+    css`
+      &:hover {
+        cursor: pointer;
+        box-shadow: 0 4px 6px 0px hsla(0, 0%, 0%, 0.2);
+      }
+    `}
 `;
 
 const SCardTitle = styled.div`
-  font-size: 20px;
+  font-size: 18px;
   font-weight: bold;
-  margin: 20px 0;
+  margin: 10px 0;
 `;
 
 const SCardBody = styled.div`
-  margin: 20px 0;
-  font-size: 20px;
+  margin: 10px 0;
+  font-size: 16px;
   color: #646464;
 
   > a {
@@ -98,26 +102,27 @@ const SCardCategory = styled.span`
   display: inline-block;
   padding: 0.25em 0.4em;
   font-size: 75%;
-  color: #FFFFFF;
+  color: #ffffff;
   border-radius: 0.25rem;
   text-align: center;
   font-weight: bold;
   margin-right: 3px;
-  background-color: ${props => {
-    switch(props.themeColor) {
-      case 'blueGradient':
+  background-color: ${(props) => {
+    switch (props.themeColor) {
+      case "blueGradient":
         return `${props.theme.colors.blueGradientEnd}`;
-      case 'greenGradient':
+      case "greenGradient":
         return `${props.theme.colors.greenGradientEnd}`;
-      case 'pinkGradient':
+      case "pinkGradient":
         return `${props.theme.colors.pinkGradientStart}`;
     }
   }};
 `;
 
 const SCardTimestamp = styled.span`
   margin: 10px 10px 5px 0;
-  color: #BFBFBF; 
+  color: #bfbfbf;
+  font-size: 14px;
 `;
 
 const SCardImg = styled.img`
@@ -127,40 +132,51 @@ const SCardImg = styled.img`
 `;
 
 const SCardPadder = styled.div`
-  padding: 15px 25px;
+  padding: 10px 15px;
 `;
 
 class Card extends React.Component {
   render() {
-    const { title, children, click, theme, borderNone, categories, timeStamp,
-      showButton, buttonText, img, alt } = this.props;
+    const {
+      title,
+      children,
+      click,
+      theme,
+      borderNone,
+      categories,
+      timeStamp,
+      showButton,
+      buttonText,
+      img,
+      alt,
+    } = this.props;
 
     return (
       <ThemeProvider theme={commonTheme}>
         <SCard themeColor={theme} onClick={click} borderNone={borderNone}>
-          {
-            img && <SCardImg src={img} alt={alt} />
-          }
+          {img && <SCardImg src={img} alt={alt} />}
           <SCardPadder>
-            <SCardTitle>{title}</SCardTitle>
-            {
-              timeStamp && <SCardTimestamp>{ timeStamp }</SCardTimestamp>
-            }
-            {
-              categories.map((category, idx) => <SCardCategory themeColor={theme} key={idx}>{category}</SCardCategory>)
-            }
+            {title && <SCardTitle>{title}</SCardTitle>}
+            {timeStamp && <SCardTimestamp>{timeStamp}</SCardTimestamp>}
+            {categories.map((category, idx) => (
+              <SCardCategory themeColor={theme} key={idx}>
+                {category}
+              </SCardCategory>
+            ))}
             <SCardBody>{children}</SCardBody>
-            {
-              showButton && (<SCardFooter><Button text={buttonText} theme={theme} click={click} /></SCardFooter>)
-            }
+            {showButton && (
+              <SCardFooter>
+                <Button text={buttonText} theme={theme} click={click} />
+              </SCardFooter>
+            )}
           </SCardPadder>
         </SCard>
       </ThemeProvider>
-    )
+    );
   }
 }
 
 Card.propTypes = propTypes;
 Card.defaultProps = defaultProps;
 
-export default Card;
+export default Card;
diff --git a/src/theme/eurekaui-theme.js b/src/theme/eurekaui-theme.js
@@ -9,11 +9,11 @@ export default {
     greenGradientEnd: "#3BB2B8",
     pinkGradientStart: "#F85D80",
     pinkGradientEnd: "#717FF4",
-    borderColor: "#E3E3E3"
+    borderColor: "#E3E3E3",
   },
   button: {
-    paddingBaseVertical: "10px",
-    paddingBaseHorizontal: "34px",
-    borderRadius: "25px"
-  }
-}
+    paddingBaseVertical: "7px",
+    paddingBaseHorizontal: "24px",
+    borderRadius: "25px",
+  },
+};