changed the size of Tshirt icon

ShaastraWebops · Feb 8, 2022 · 1fca5f9 · 1fca5f9
1 parent 87de473
commit 1fca5f9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Text, VStack, Code, useColorModeValue, Flex, Button, Tooltip } from "@chakra-ui/react";
+import { Text, VStack, Code, useColorModeValue, Flex, Button, Tooltip, Icon } from "@chakra-ui/react";
 import { ReactComponent as DiceOutlineDarkAnimated } from "./../../images/logo/animated/non-looped/Text_Outline_Dark_animated.svg";
 import { ReactComponent as DiceOutlineLightAnimated } from "./../../images/logo/animated/non-looped/Text_Outline_Light_animated.svg";
 import "../../styles/Home.css";
@@ -393,16 +393,16 @@ const Home = (props: Props) => {
               for&nbsp;
             </h3> */}
              <a href="https://shaastra2022.com">Live Now</a>
-             <Tooltip label="Workshop Offer">
-              <Button padding="2vw" marginLeft="3vw" backgroundColor={"transparent"}
+             <Tooltip label="Get a Chance to win free TShirt">
+              <Button padding="3vw" marginLeft="3vw" backgroundColor={"transparent"}
               onHover={() => {
 
               }}
               onClick={(e) => {
                   e.preventDefault();
                   history.push('/events/workshops')
               }}
-              ><FaTshirt size="3vw"></FaTshirt></Button>
+              ><Icon as={FaTshirt} className="rainbow" boxSize={["9vw","9vw","5vw","5vw"]}/></Button>
             </Tooltip>
           </div>
           <div className="imgBox">

diff --git a/src/styles/Home.css b/src/styles/Home.css
@@ -101,6 +101,27 @@
   scroll-snap-align: start;
   padding-left: 150px;
 }
+.rainbow {
+  animation: colorRotate 2s linear 0s infinite;
+}
+
+@keyframes colorRotate {
+  from {
+    color: #6666ff;
+  }
+  10% {
+    color: #0099ff;
+  }
+  50% {
+    color: #00ff00;
+  }
+  75% {
+    color: #ff3399;
+  }
+  100% {
+    color: #6666ff;
+  }
+}
 @media screen and (max-width: 900px) {
   .Home section {
     padding-left: 100px;