Fix/icons (#44)

* fixed icon positioning * fixed styling issues, added uuidv4 library, updated api base url, showing image icons * added support for icons, updated styling
SU-UTB · Dec 5, 2023 · 671dc92 · 671dc92
1 parent 847d920
commit 671dc92
Show file tree

Hide file tree

Showing 19 changed files with 3,760 additions and 3,701 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,36 +1,38 @@
-{
-  "name": "web-pruvodcestudenta-fe",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "host": "vite --host"
-  },
-  "dependencies": {
-    "framer-motion": "^10.12.12",
-    "hamburger-react": "^2.5.0",
-    "js-cookie": "^3.0.5",
-    "react": "^18.2.0",
-    "react-axios": "^2.0.6",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.9.0",
-    "react-spinners": "^0.13.8",
-    "styled-components": "^5.3.6",
-    "swiper": "^10.1.0"
-  },
-  "devDependencies": {
-    "@types/js-cookie": "^3.0.3",
-    "@types/react": "^18.0.24",
-    "@types/react-dom": "^18.0.8",
-    "@types/styled-components": "^5.1.26",
-    "@vitejs/plugin-react": "^2.2.0",
-    "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.19",
-    "prettier": "^2.8.7",
-    "typescript": "^5.1.6",
-    "vite": "^3.2.3"
-  }
-}
+{
+  "name": "web-pruvodcestudenta-fe",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "host": "vite --host"
+  },
+  "dependencies": {
+    "framer-motion": "^10.12.12",
+    "hamburger-react": "^2.5.0",
+    "js-cookie": "^3.0.5",
+    "react": "^18.2.0",
+    "react-axios": "^2.0.6",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.9.0",
+    "react-spinners": "^0.13.8",
+    "styled-components": "^5.3.6",
+    "swiper": "^10.1.0",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.3",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@types/styled-components": "^5.1.26",
+    "@types/uuid": "^9.0.7",
+    "@vitejs/plugin-react": "^2.2.0",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.19",
+    "prettier": "^2.8.7",
+    "typescript": "^5.1.6",
+    "vite": "^3.2.3"
+  }
+}
diff --git a/src/Routes.tsx b/src/Routes.tsx
@@ -1,18 +1,18 @@
-import { Route, Routes as RouterRoutes } from 'react-router-dom';
-
-// import Faq from './pages/Faq';
-import Main from './pages/Main';
-import Section from './pages/Section';
-import TopicDetail from './pages/TopicDetail';
-
-// TODO: change the naming of the paths - should be in Czech language
-export const Routes = () => {
-  return (
-    <RouterRoutes>
-      <Route index path="/" element={<Main />} />
-      <Route path="/:sectionSlug" element={<Section />} />
-      <Route path="/:sectionSlug/:topicSlug" element={<TopicDetail />} />
-      {/* <Route path="/faq" element={<Faq />} /> */}
-    </RouterRoutes>
-  );
-};
+import { Route, Routes as RouterRoutes } from 'react-router-dom';
+
+// import Faq from './pages/Faq';
+import Main from './pages/Main';
+import Section from './pages/Section';
+import TopicDetail from './pages/TopicDetail';
+
+// TODO: change the naming of the paths - should be in Czech language
+export const Routes = () => {
+  return (
+    <RouterRoutes>
+      <Route index path="/" element={<Main />} />
+      <Route path="/:sectionSlug" element={<Section />} />
+      <Route path="/:sectionSlug/:topicSlug" element={<TopicDetail />} />
+      {/* <Route path="/faq" element={<Faq />} /> */}
+    </RouterRoutes>
+  );
+};
diff --git a/src/components/layout/header/Header.styled.tsx b/src/components/layout/header/Header.styled.tsx
@@ -1,76 +1,76 @@
-import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-
-interface LinksWrapperProps {
-  isOpen: boolean;
-}
-
-export const HeaderWrapper = styled.header`
-  max-width: 100%;
-  background-color: white;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  border-radius: 0 0 16px 16px;
-  position: relative;
-
-  @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) {
-    padding: 0 60px;
-    justify-content: space-between;
-  }
-`;
-
-export const HeaderLink = styled(Link)`
-  text-decoration: none;
-  display: block;
-  color: black;
-`;
-
-export const LinksWrapper = styled.div<LinksWrapperProps>`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px 0;
-  position: absolute;
-  transition: transform 0.3s ease-in-out;
-  top: 60px;
-  transform: translateX(${({ isOpen }) => (isOpen ? '0' : '100vw')});
-  width: 100%;
-  background: #ffffff;
-  padding: 20px 0;
-  @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) {
-    transform: translateX(0);
-    flex-direction: row;
-    gap: 0 60px;
-    position: static;
-    width: auto;
-    background: none;
-  }
-`;
-
-export const AppLogo = styled.a`
-  padding: 0.75rem 0;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  gap: 6px;
-  text-decoration: none;
-  color: black;
-
-  img {
-    max-width: fit-content;
-  }
-`;
-
-export const LogoHamburgerWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding: 0 20px;
-
-  @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) {
-    width: max-content;
-    padding: 0;
-  }
-`;
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+interface LinksWrapperProps {
+  isOpen: boolean;
+}
+
+export const HeaderWrapper = styled.header`
+  max-width: 100%;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  border-radius: 0 0 16px 16px;
+  position: relative;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) {
+    padding: 0 60px;
+    justify-content: space-between;
+  }
+`;
+
+export const HeaderLink = styled(Link)`
+  text-decoration: none;
+  display: block;
+  color: black;
+`;
+
+export const LinksWrapper = styled.div<LinksWrapperProps>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px 0;
+  position: absolute;
+  transition: transform 0.3s ease-in-out;
+  top: 60px;
+  transform: translateX(${({ isOpen }) => (isOpen ? '0' : '100vw')});
+  width: 100%;
+  background: #ffffff;
+  padding: 20px 0;
+  @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) {
+    transform: translateX(0);
+    flex-direction: row;
+    gap: 0 60px;
+    position: static;
+    width: auto;
+    background: none;
+  }
+`;
+
+export const AppLogo = styled.a`
+  padding: 0.75rem 0;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  gap: 6px;
+  text-decoration: none;
+  color: black;
+
+  img {
+    max-width: fit-content;
+  }
+`;
+
+export const LogoHamburgerWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0 20px;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) {
+    width: max-content;
+    padding: 0;
+  }
+`;
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
@@ -1,47 +1,47 @@
-import { useState } from 'react';
-
-import { Socials } from '../../socials/Socials';
-import { headerLinks } from './Header.content';
-import {
-  AppLogo,
-  HeaderLink,
-  HeaderWrapper,
-  LinksWrapper,
-  LogoHamburgerWrapper,
-} from './Header.styled';
-
-import utbMini from '../../../assets/icons/utb-mini-logo.svg';
-import { APP_NAME } from '../../../lib/constants';
-import HamburgerButton from './hamburger/HamburgerButton';
-
-const Header = () => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-
-  return (
-    <HeaderWrapper>
-      <LogoHamburgerWrapper>
-        <AppLogo href="/">
-          {APP_NAME}
-          <img height={18} src={utbMini} alt="utb_logo" />
-        </AppLogo>
-        <HamburgerButton isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} />
-      </LogoHamburgerWrapper>
-
-      <LinksWrapper isOpen={isOpen}>
-        {headerLinks.map(({ title, link, newTab }) => (
-          <HeaderLink
-            key={link}
-            to={link}
-            target={newTab ? '_blank' : ''}
-            rel="noopener noreferrer"
-          >
-            {title}
-          </HeaderLink>
-        ))}
-        <Socials />
-      </LinksWrapper>
-    </HeaderWrapper>
-  );
-};
-
-export default Header;
+import { useState } from 'react';
+
+import { Socials } from '../../socials/Socials';
+import { headerLinks } from './Header.content';
+import {
+  AppLogo,
+  HeaderLink,
+  HeaderWrapper,
+  LinksWrapper,
+  LogoHamburgerWrapper,
+} from './Header.styled';
+
+import utbMini from '../../../assets/icons/utb-mini-logo.svg';
+import { APP_NAME } from '../../../lib/constants';
+import HamburgerButton from './hamburger/HamburgerButton';
+
+const Header = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <HeaderWrapper>
+      <LogoHamburgerWrapper>
+        <AppLogo href="/">
+          {APP_NAME}
+          <img height={18} src={utbMini} alt="utb_logo" />
+        </AppLogo>
+        <HamburgerButton isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} />
+      </LogoHamburgerWrapper>
+
+      <LinksWrapper isOpen={isOpen}>
+        {headerLinks.map(({ title, link, newTab }) => (
+          <HeaderLink
+            key={link}
+            to={link}
+            target={newTab ? '_blank' : ''}
+            rel="noopener noreferrer"
+          >
+            {title}
+          </HeaderLink>
+        ))}
+        <Socials />
+      </LinksWrapper>
+    </HeaderWrapper>
+  );
+};
+
+export default Header;
diff --git a/src/components/main/rector/RectorSectionWrapper.styled.tsx b/src/components/main/rector/RectorSectionWrapper.styled.tsx
@@ -1,16 +1,14 @@
-import styled from 'styled-components';
-
-export const RectorSectionWrapper = styled.section`
-  display: flex;
-  flex-direction: column;
-  padding: 0 1rem;
-  max-width: 1600px;
-  margin: 60px auto;
-  gap: 24px;
-  align-items: center;
-
-  @media (min-width: ${({ theme }) => theme.breakpoints.desktop}) {
-    flex-direction: row;
-    gap: 82px;
-  }
-`;
+import styled from 'styled-components';
+
+export const RectorSectionWrapper = styled.section`
+  display: grid;
+  padding: 0 1rem;
+  max-width: 1200px;
+  margin: 60px auto;
+  gap: 24px;
+  justify-content: center;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.desktop}) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+`;