style: change more styles for branding

researchdata-sheffield · Nov 7, 2022 · 4f208d7 · 4f208d7
1 parent 86c7176
commit 4f208d7
Show file tree

Hide file tree

Showing 20 changed files with 56 additions and 76 deletions.
diff --git a/src/components/blog/menuCategory.jsx b/src/components/blog/menuCategory.jsx
@@ -22,9 +22,9 @@ const menuCategory = ({ pageContext, handleTagMenu, tagMenu }) => {
           <Link
             key={cat}
             to={`/blog/category/${kebabCase(cat)}`}
-            activeStyle={{ color: "#00aeef" }}
+            activeStyle={{ backgroundColor: "rgb(154 219 232)" }}
             partiallyActive={true}
-            className={`${buttonStyle} hover:text-brand-blue hover:border-blue-300 font-semibold`}
+            className={`${buttonStyle} hover:bg-brand-blue hover:border-blue-300 font-semibold`}
           >
             {cat}
           </Link>
@@ -33,9 +33,9 @@ const menuCategory = ({ pageContext, handleTagMenu, tagMenu }) => {
           <Link
             key={tag[0]}
             to={`/blog/tag/${kebabCase(tag[0])}`}
-            activeStyle={{ color: "#ff79b4" }}
+            activeStyle={{ backgroundColor: "#ff79b4" }}
             partiallyActive={true}
-            className={`${buttonStyle} hover:text-brand-pink hover:border-pink-300`}
+            className={`${buttonStyle} hover:bg-brand-pink hover:border-pink-300`}
           >
             {tag[0]}
           </Link>
@@ -44,7 +44,7 @@ const menuCategory = ({ pageContext, handleTagMenu, tagMenu }) => {
           aria-label="Click to toggle the tag menu"
           title="Click to toggle the tag menu"
           onClick={() => handleTagMenu()}
-          className={`${buttonStyle} hover:text-white hover:bg-gray-900 hover:border-gray-900 font-bold cursor-pointer`}
+          className={`${buttonStyle} hover:text-white hover:bg-brand-black hover:border-brand-black font-bold cursor-pointer`}
         >
           {tagMenu ? "CLOSE" : "MORE"}
         </button>

diff --git a/src/components/blog/menuTagSlide.jsx b/src/components/blog/menuTagSlide.jsx
@@ -8,6 +8,7 @@ import { IoMdClose } from "react-icons/io";
 import { useLocation } from "@gatsbyjs/reach-router";
 
 const menuTagSlide = ({ pageContext, handleTagMenu, tagMenu }) => {
+  const BUTTON_STYLES = `bg-brand-blue text-brand-black hover:bg-brand-black hover:text-white`;
   const [filterTag, setfilterTag] = useState(pageContext.allTags);
   var { href } = useLocation();
   if (!href) href = "";
@@ -45,7 +46,7 @@ const menuTagSlide = ({ pageContext, handleTagMenu, tagMenu }) => {
         style={{ transform: "translateY(-5%)" }}
       >
         <div
-          className="px-3 py-4 hover:bg-brand-blue bg-gray-900 transition duration-500 shadow-xl"
+          className={`${BUTTON_STYLES} px-3 py-4 transition duration-500 shadow-xl`}
           title="Open tag menu"
           aria-label="Open the side tag menu"
         >
@@ -60,7 +61,7 @@ const menuTagSlide = ({ pageContext, handleTagMenu, tagMenu }) => {
         title="Close the menu"
         aria-label="Close the slide tag menu"
       >
-        <div className="px-3 py-3 bg-brand-blue hover:bg-gray-900 transition duration-500 font-bold">
+        <div className={`${BUTTON_STYLES} px-3 py-3 transition duration-500 font-bold`}>
           <IoMdClose />
         </div>
       </button>
@@ -97,7 +98,7 @@ const menuTagSlide = ({ pageContext, handleTagMenu, tagMenu }) => {
               activeStyle={{ color: "white", backgroundColor: "#00aeef" }}
               partiallyActive={true}
               to={`/blog/tag/${kebabCase(tag)}`}
-              className="inline-block hover:bg-brand-blue hover:text-white py-1 px-2 m-1 bg-gray-50 text-gray-700 rounded-full 2xl:text-sm font-sans font-semibold"
+              className="inline-block hover:bg-brand-blue py-1 px-2 m-1 bg-gray-50 text-gray-700 rounded-full 2xl:text-sm font-sans font-semibold"
             >
               {tag} ({pageContext.countTags[`${tag}`]})
             </Link>
@@ -107,7 +108,7 @@ const menuTagSlide = ({ pageContext, handleTagMenu, tagMenu }) => {
           onClick={() => handleTagMenu()}
           className={`${
             tagMenu ? "block" : "hidden"
-          } cursor-pointer my-5 px-3 py-2 bg-brand-blue hover:bg-gray-900 transition duration-500 font-bold text-center w-full`}
+          } ${BUTTON_STYLES} cursor-pointer my-5 px-3 py-2 transition duration-500 font-bold text-center w-full`}
         >
           ClOSE
         </button>

diff --git a/src/components/events/upcomingEvents.jsx b/src/components/events/upcomingEvents.jsx
@@ -17,22 +17,21 @@ const UpcomingEvents = ({ allEventbriteEvents }) => {
 
           return (
             <a
-              className="flex flex-col-reverse md:flex-row flex-wrap w-full hover:shadow-xl my-3 lg:my-1 group"
+              className="flex flex-col-reverse md:flex-row flex-wrap w-full hover:shadow-xl my-3 lg:my-2 group"
               style={{
                 position: "relative",
                 transition: ".5s ease",
                 background: "white",
                 color: "rgb(55, 65, 81)",
-                border: "2px solid rgb(249, 250, 251)",
                 overflowY: "hidden"
               }}
               href={node.url}
               key={node.id}
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="w-full md:w-9/12 py-4 px-4">
-                <p className="font-semibold text-lg text-black group-hover:text-brand-blue leading-5">
+              <div className="w-full md:w-9/12 py-4 px-4 group-hover:bg-brand-blue">
+                <p className="font-semibold text-lg text-black leading-5">
                   {node.name.text}
                 </p>
                 <p className="text-gray-700 mt-1 leading-tight text-sm group-hover:text-black">

diff --git a/src/components/home/homeCommunity.jsx b/src/components/home/homeCommunity.jsx
@@ -93,7 +93,7 @@ const HomeCommunity = () => {
               dataviz team to help you make the most of your data.
             </div>
             <ArrowButton
-              className={`${buttonClasses} group-hover:bg-brand-blue`}
+              className={`${buttonClasses} group-hover:bg-brand-blue group-hover:text-brand-black`}
             >
               Coming soon
             </ArrowButton>

diff --git a/src/components/home/learningPath.jsx b/src/components/home/learningPath.jsx
@@ -14,7 +14,7 @@ const NextArrow = (props) => {
   return (
     <div
       className={className}
-      style={{ ...style, right: 0, zIndex: "100" }}
+      style={{ ...(style || []), right: 0, zIndex: "100" }}
       onClick={onClick}
     />
   );
@@ -31,7 +31,7 @@ const PrevArrow = (props) => {
   return (
     <div
       className={className}
-      style={{ ...style, left: 0, zIndex: "100" }}
+      style={{ ...(style || []), left: 0, zIndex: "100" }}
       onClick={onClick}
     />
   );

diff --git a/src/components/shared/layout.jsx b/src/components/shared/layout.jsx
@@ -3,18 +3,18 @@ import PropTypes from "prop-types";
 import ScrollTopBtn from "./scrollTop";
 import Header from "./header";
 import Footer from "./footer";
-import logo from "../../images/UOSLogo_Primary_Violet_RGB.svg";
+import logo from "../../images/UOSLogo_Primary_White_RGB.svg";
 
 const Layout = (props) => {
   return (
     <div
       id="website"
-      className="flex flex-col font-sans min-h-screen text-gray-900 high-specificity"
+      className="flex flex-col font-sans min-h-screen text-brand-black high-specificity"
     >
       <ScrollTopBtn />
       <div
         id="__loader"
-        className="transition duration-1500 bg-gray-900 w-full h-full fixed text-center flex flex-wrap content-center justify-center items-center"
+        className="transition duration-1500 bg-brand-black w-full h-full fixed text-center flex flex-wrap content-center justify-center items-center"
         style={{ zIndex: "999" }}
       >
         <div className="w-full">

diff --git a/src/components/style/styleComponent.jsx b/src/components/style/styleComponent.jsx
@@ -132,11 +132,11 @@ export const IMG_DIV = styled.div`
 `;
 
 export const CatBtn = styled(gatsby_Link)`
-  ${tw`inline-block hover:bg-brand-blue hover:text-white py-1 px-2 mt-2 mr-2 bg-gray-800 text-gray-100 border-gray-800 border-1 hover:border-transparent rounded-full text-xs`}
+  ${tw`inline-block hover:bg-brand-blue hover:text-brand-black py-1 px-2 mt-2 mr-2 bg-gray-800 text-gray-100 border-gray-800 border-1 hover:border-transparent rounded-full text-xs`}
 `;
 
 export const TagBtn = styled(gatsby_Link)`
-  ${tw`inline-block hover:bg-brand-blue hover:text-white py-1 px-2 mt-2 mr-2 bg-white text-gray-700 border-1 border-gray-200 hover:border-transparent rounded-full text-xs`}
+  ${tw`inline-block hover:bg-brand-blue hover:text-brand-black py-1 px-2 mt-2 mr-2 bg-white text-gray-700 border-1 border-gray-200 hover:border-transparent rounded-full text-xs`}
 `;
 
 export const HomeBlogNav = styled.div`

diff --git a/src/components/style/visStyle.jsx b/src/components/style/visStyle.jsx
@@ -235,7 +235,7 @@ export const WordCloud = styled.div`
     padding: ${(props) => (props.backgroundColour === true ? "8px 13px" : "")};
 
     &:hover {
-      color: #00aeef !important;
+      color: #fff !important;
       background-color: ${(props) =>
         props.backgroundColour === true ? "#000" : ""} !important;
     }
@@ -272,6 +272,7 @@ const visHelperButton = styled.button`
 export const VisTagMenuBtn = styled(visHelperButton)`
   opacity: 0;
   right: 140px;
+
   background-image: linear-gradient(
     135deg,
     rgb(255, 121, 180) 15%,

diff --git a/src/components/visualisation/visDetail.jsx b/src/components/visualisation/visDetail.jsx
@@ -24,7 +24,7 @@ const visDetail = ({
   return (
     <div
       className={`${className} flex flex-wrap justify-between mt-5 mx-auto items-center`}
-      style={{ ...style, maxWidth: "550px" }}
+      style={{ ...(style || []), maxWidth: "550px" }}
     >
       {displayDescription && (
         <p className="text-gray-300 text-base">{mdx.frontmatter.description}</p>

diff --git a/src/components/visualisation/visDownload.jsx b/src/components/visualisation/visDownload.jsx
@@ -51,13 +51,13 @@ const visDownload = ({ mdx }) => {
       <div
         className={`${
           menu ? "z-20" : "hidden z-0"
-        } fixed rounded-lg py-5 px-6 bg-gray-700 text-white text-base text-left`}
+        } fixed rounded-lg py-5 px-6 bg-brand-black text-white text-base text-left`}
         style={{
           left: "50%",
           top: "50%",
           transform: "translate(-50%, -50%)",
           maxWidth: "350px",
-          boxShadow: "0 5px 30px -5px #00aeef"
+          boxShadow: "0 5px 30px -5px #9ADBE8"
         }}
       >
         <h4 className="text-gray-300">
@@ -119,7 +119,7 @@ const visDownload = ({ mdx }) => {
         {/* cancel button */}
         <button
           onClick={() => setMenu(!menu)}
-          className="text-gray-100 hover:text-brand-pink rounded-md transition duration-300 text-2xl p-1 absolute top-0 right-0 flex items-center"
+          className="text-gray-100 hover:text-brand-blue rounded-md transition duration-300 text-2xl p-1 absolute top-0 right-0 flex items-center"
           aria-label="Close download menu"
         >
           <MdCancel />

diff --git a/src/components/visualisation/visEmbed.jsx b/src/components/visualisation/visEmbed.jsx
@@ -115,7 +115,7 @@ const visEmbed = (props) => {
           maxWidth: "800px",
           userSelect: "text",
           backgroundColor: "#f7f7f7",
-          boxShadow: "0 10px 50px -5px #00aeef",
+          boxShadow: "0 10px 50px -5px #9ADBE8",
           zIndex: embedMenu ? "999" : "0",
           display: embedMenu ? "" : "none"
         }}
@@ -142,7 +142,7 @@ const visEmbed = (props) => {
           <div
             id="copyEmbedCodeBtn"
             onClick={() => copyEmbedCode()}
-            className="w-full mt-2 text-xl bg-gray-200 rounded-lg text-gray-900 hover:bg-green-200 p-3 text-center transition duration-500 font-semibold cursor-pointer"
+            className="w-full mt-2 text-xl bg-gray-200 rounded-lg text-gray-900 hover:bg-brand-blue p-3 text-center transition duration-500 font-semibold cursor-pointer"
           >
             Copy embed code{" "}
             <MdContentCopy className="text-2xl inline-block ml-1" />
@@ -152,7 +152,7 @@ const visEmbed = (props) => {
         {/* cancel button */}
         <button
           onClick={() => setEmbedMenu(!embedMenu)}
-          className="text-gray-500 hover:text-gray-900 rounded-md transition duration-300 text-3xl p-1 absolute top-0 right-0 flex items-center"
+          className="text-gray-500 hover:text-brand-blue rounded-md transition duration-300 text-3xl p-1 absolute top-0 right-0 flex items-center"
           title="Close embed menu"
           aria-label="Close embed menu"
         >

diff --git a/src/components/visualisation/visLayout.jsx b/src/components/visualisation/visLayout.jsx
@@ -54,7 +54,7 @@ const visLayout = ({ currentMDXs, nextPageRef, title, pageContext }) => {
   }
 
   return (
-    <div className="bg-gray-900">
+    <div className="bg-brand-black">
       <SEO
         title={`${pageTitle} Visualisation`}
         keywords={[
@@ -111,7 +111,7 @@ const visLayout = ({ currentMDXs, nextPageRef, title, pageContext }) => {
         </button>
       </div>
 
-      <div className="min-h-80 flex flex-wrap justify-center pt-24 pb-32 bg-gray-900 px-5">
+      <div className="min-h-80 flex flex-wrap justify-center pt-24 pb-32 bg-brand-black px-5">
         <VisGrid>
           {currentMDXs.length > 0 &&
             currentMDXs.map(({ node }) => {

diff --git a/src/components/visualisation/visPagination.jsx b/src/components/visualisation/visPagination.jsx
@@ -13,12 +13,12 @@ const visPagination = (props) => {
   const { githubLink, shareLink, shareMessage } = mdx.shareLinks;
   const { prev, next } = mdx.pageContext;
   const buttonStyle =
-    "py-2 px-2 bg-gray-800 text-white font-semibold text-sm rounded-md hover:bg-gray-700 transition duration-300";
+    "py-2 px-2 bg-gray-800 hover:bg-brand-blue text-white hover:text-brand-black font-semibold text-sm rounded-md transition duration-300";
 
   return (
     <div
       className={`${className} flex flex-wrap justify-between mt-2 space-y-3 mx-auto items-center relative z-10`}
-      style={{ ...style, maxWidth: "550px" }}
+      style={{ ...(style || []), maxWidth: "550px" }}
     >
       {/* Previous visualisation */}
       <Link

diff --git a/src/components/visualisation/visUtils.jsx b/src/components/visualisation/visUtils.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { trackScrollPosition } from "../../utils/hooks/trackScrollPosition";
 import { VisTagMenuBtn, VisFooterBtn } from "../style/visStyle";
 import { FaTags } from "react-icons/fa";
-import { MdCancel } from "react-icons/md";
+import { MdClose } from "react-icons/md";
 import { ImMenu3, ImMenu4 } from "react-icons/im";
 import { FiSearch } from "react-icons/fi";
 import Footer from "../shared/footer";
@@ -21,7 +21,7 @@ const VisUtils = React.memo(({ tagMenu, handleTagMenu, tags }) => {
   const [filterTag, setfilterTag] = useState(tags);
   const [footer, setFooter] = useState(false);
   const footerIconStyle =
-    "text-white text-2xl group-hover:scale-110 transition duration-500";
+    "text-2xl group-hover:scale-110 transition duration-500";
 
   trackScrollPosition("vis-tag-button");
   trackScrollPosition("vis-footer-button");
@@ -58,7 +58,7 @@ const VisUtils = React.memo(({ tagMenu, handleTagMenu, tags }) => {
         onClick={() => setFooter(!footer)}
         tabindex="101"
         id="vis-footer-button"
-        className={`group ${footer ? "bg-brand-blue" : "bg-gray-800"}`}
+        className={`group ${footer ? "bg-brand-blue text-brand-black" : "bg-brand-black text-white"}`}
         title="Footer"
       >
         {!footer && <ImMenu4 className={footerIconStyle} />}
@@ -70,7 +70,7 @@ const VisUtils = React.memo(({ tagMenu, handleTagMenu, tags }) => {
         id="vis-tag-menu"
         className={`${
           tagMenu ? "visible" : "invisible translate-x-full"
-        } bg-gray-900 transform`}
+        } bg-black transform`}
         style={{
           zIndex: "1000",
           maxWidth: "450px",
@@ -84,22 +84,22 @@ const VisUtils = React.memo(({ tagMenu, handleTagMenu, tags }) => {
       >
         <button
           onClick={() => handleTagMenu()}
-          className="text-gray-500 hover:text-red-400 text-lg"
+          className="text-gray-300 hover:text-brand-blue text-lg"
           style={{
             border: "1px solid transparent",
-            backgroundColor: "black",
+            backgroundColor: "rgb(25, 25, 25)",
             transition: ".3s ease",
             position: "absolute",
             top: 0,
             right: 0,
             margin: "1.5rem",
             display: "flex",
             alignItems: "center",
-            padding: ".75rem .25rem",
+            padding: ".3rem",
             borderRadius: ".375rem"
           }}
         >
-          <MdCancel className="text-xl mr-1" />
+          <MdClose className="text-xl mr-1" />
           CLOSE
         </button>
         <div className="w-full m-6">
@@ -127,24 +127,9 @@ const VisUtils = React.memo(({ tagMenu, handleTagMenu, tags }) => {
           height="auto"
           words={filterTag}
           menu="Tag menu"
-          minFontSize={0.97}
+          minFontSize={1.2}
           maxFontSize={2.8}
           padding="1px 3px"
-          colour={[
-            "#808080",
-            "#ff5e5e",
-            "#fedf00",
-            "#6d3db3",
-            "#52ff9c",
-            "#ade1f8",
-            "#f0f0f0",
-            "#fff",
-            "#ff56a1",
-            "#89f064",
-            "#393939",
-            "#08e8ff",
-            "#00aeef"
-          ]}
           wordStyle={{ whiteSpace: "normal" }}
         />
       </div>

diff --git a/src/components/visualisation/wordCloud.jsx b/src/components/visualisation/wordCloud.jsx
@@ -31,25 +31,18 @@ const wordCloud = React.memo(
     padding,
     menu = "",
     order = "default",
-    minFontSize = 0.9,
+    minFontSize = 0.95,
     maxFontSize = 2.1,
     fontUnit = "rem",
     wordStyle,
     ...props
   }) => {
     const [wordsArr, setWords] = useState(words);
     const wordCloudColours = colours || [
-      "#808080",
-      "#ff5e5e",
+      "#9ADBE8",
       "#fedf00",
-      "#0066b3",
-      "#6d3db3",
-      "#ade1f8",
-      "#f0f0f0",
-      "#fff",
-      "#89f064",
-      "#393939",
-      "#08e8ff"
+      "#00aeef",
+      "#ff79b4"
     ];
     const wordBackgroundColour = backgroundColour || [];