cool sink logo

frontend-react/src/components/builds/BuildCard.tsx

@@ -9,6 +9,7 @@ import {
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
+  Button,
 } from "@chakra-ui/core"
 import WeaponImage from "../common/WeaponImage"
 import { top500 } from "../../assets/imageImports"
@@ -118,15 +119,15 @@ const BuildCard: React.FC<BuildCardProps> = ({
         ) : (
           <Box />
         )}
-        <IconButton
+        <Button
           variant="ghost"
-          isRound
           variantColor={themeColor}
           aria-label={apView ? "Show gear" : "Show ability point count"}
-          fontSize="20px"
-          icon={apView ? FaMinus : FaPlus}
+          fontSize="15px"
           onClick={() => setApView(!apView)}
-        />
+        >
+          {apView ? "GEAR" : "AP"}
+        </Button>
       </Flex>
     </Box>
   )

frontend-react/src/components/home/HomePage.tsx

@@ -26,7 +26,7 @@ const HomePage: React.FC<RouteComponentProps> = ({}) => {
         </Heading>
         <Heading
           letterSpacing="1px"
-          fontFamily="'Lato', regular"
+          fontWeight="light"
           fontSize="2vw"
           color={grayWithShade}
         >

frontend-react/src/components/root/Logo.css

@@ -0,0 +1,11 @@
+.desktop:hover > .s {
+  transform: translateY(7px);
+}
+
+.mobile:hover > .s {
+  transform: translateY(1px);
+}
+
+.mobile:hover > .ink {
+  transform: translateY(0px);
+}

frontend-react/src/components/root/Logo.tsx

@@ -1,13 +1,37 @@
 import React from "react"
-import { Heading } from "@chakra-ui/core"
+import { Box } from "@chakra-ui/core"
+import "./Logo.css"
 
-const Logo: React.FC = () => {
+interface LogoProps {
+  mobile?: boolean
+}
+
+const Logo: React.FC<LogoProps> = ({ mobile = false }) => {
   return (
-    <>
-      <Heading fontSize="30px" fontFamily="'Pacifico', cursive">
-        Sendou.ink
-      </Heading>
-    </>
+    <Box className={mobile ? "mobile" : "desktop"}>
+      <Box
+        className="s"
+        as="span"
+        display="inline-block"
+        transform="translateY(-7px)"
+        fontSize="30px"
+        fontFamily="'Pacifico', cursive"
+        transition="1.1s"
+      >
+        S
+      </Box>
+      <Box
+        className="ink"
+        as="span"
+        display="inline-block"
+        transform="translateY(7px)"
+        fontSize="30px"
+        fontFamily="'Pacifico', cursive"
+        transition="1.1s"
+      >
+        ink
+      </Box>
+    </Box>
   )
 }
 

frontend-react/src/components/root/MenuBar.tsx

@@ -30,7 +30,7 @@ export const MenuBar: React.FC = () => {
     >
       <Flex size="100%" px="6" justifyContent="space-between">
         <Flex alignItems="center">
-          <Logo />
+          <Logo mobile />
         </Flex>
         <Flex alignItems="center" color="gray.500" justify="flex-end">
           <IconButton