diff --git a/app/components/discourserankedlist.js b/app/components/discourserankedlist.js index ed937630..f8b5c020 100644 --- a/app/components/discourserankedlist.js +++ b/app/components/discourserankedlist.js @@ -1,55 +1,171 @@ -import { ListGroup} from "react-bootstrap" -import styles from "../styles/Discourserankedlist.module.css" +import { Col, Row } from 'react-bootstrap'; +import styles from '../styles/Discourserankedlist.module.css'; +import Like from '../public/svg/like.js'; +import Comment from '../public/svg/comment'; -function timeSince(date) { - let seconds = Math.floor((new Date() - date) / 1000); - let interval = seconds / 31536000; - if (interval > 1) { - return Math.floor(interval) + " years"; - } - interval = seconds / 2592000; - if (interval > 1) { - return Math.floor(interval) + " months ago"; - } - interval = seconds / 86400; - if (interval > 1) { - return Math.floor(interval) + " days ago"; - } - interval = seconds / 3600; - if (interval > 1) { - return Math.floor(interval) + " hours ago"; - } - interval = seconds / 60; - if (interval > 1) { - return Math.floor(interval) + " minutes ago"; - } - return Math.floor(seconds) + " seconds ago"; +function TimeSince(date) { + let seconds = Math.floor((new Date() - date) / 1000); + let interval = seconds / 31536000; + if (interval > 1) { + return Math.floor(interval) + ' years'; } - + interval = seconds / 2592000; + if (interval > 1) { + return Math.floor(interval) + ' months ago'; + } + interval = seconds / 86400; + if (interval > 1) { + return Math.floor(interval) + ' days ago'; + } + interval = seconds / 3600; + if (interval > 1) { + return Math.floor(interval) + ' hours ago'; + } + interval = seconds / 60; + if (interval > 1) { + return Math.floor(interval) + ' minutes ago'; + } + return Math.floor(seconds) + ' seconds ago'; +} function Discourserankedlist(props) { - let activityItems = []; - props.topposts[0]?.TopPost?.topic_list?.topics.map((topic) => { - let newTopic = { - title: topic.fancy_title, - time: timeSince(new Date(topic.created_at)), - upvotes: topic.like_count, - comments: topic.posts_count, - link: `https://forums.rocket.chat/t/${topic.slug}/${topic.id}`, - image_url: topic.image_url - } - activityItems.push(newTopic); - }) + const Data = [ + { + id: 1, + title: + 'Upload stuck at 0% again after initially fixing with chanding site url in General admin options', + time: '6:57 PM', + upvotes: '89', + comments: '91', + }, + { + id: 2, + title: 'Why can’t we have thumbnails for video uploads on mobile?', + time: '4:00 PM', + upvotes: '500', + comments: '4', + }, + { + id: 3, + title: 'Can’t find “Users must use Two Factor Authentication” Option', + time: '12:53 PM', + upvotes: '456', + comments: '75', + }, + { + id: 4, + title: 'Can’t “forget/remove my data” directly in RC 4.3.0 in livechat', + time: '8:36 AM', + upvotes: '234', + comments: '199', + }, + { + id: 5, + title: 'Not migrating, control is locked', + time: '11:30 PM', + upvotes: '441', + comments: '74', + }, + { + id: 6, + title: + 'Upload stuck at 0% again after initially fixing with chanding site url in General admin options', + time: '7:14 PM', + upvotes: '972', + comments: '42', + }, + { + id: 7, + title: 'Can’t find “Users must use Two Factor Authentication” Option', + time: '3:36 PM', + upvotes: '4279', + comments: '98', + }, + { + id: 8, + title: 'Cannot Chat Log Level - Option has disappeared', + time: '11:06 AM', + upvotes: '51', + comments: '291', + }, + { + id: 9, + title: 'Wrong IP Server', + time: '2:00 PM', + upvotes: '478', + comments: '25', + }, + { + id: 10, + title: 'Not migrating, control is locked', + time: '11:03 PM', + upvotes: '16', + comments: '15', + }, + ]; + //generates random colour for border styling + const color = [ + 'border-primary', + 'border-success', + 'border-danger', + 'border-warning', + 'border-info', + ]; - return( - <> - - {activityItems.map((item) => ( - {item.title} + // let activityItems = []; + // props.topposts[0]?.TopPost?.topic_list?.topics.map((topic) => { + // let newTopic = { + // title: topic.fancy_title, + // time: timeSince(new Date(topic.created_at)), + // upvotes: topic.like_count, + // comments: topic.posts_count, + // link: `https://forums.rocket.chat/t/${topic.slug}/${topic.id}`, + // image_url: topic.image_url, + // }; + // activityItems.push(newTopic); + // }); + //todo - add top posts array instead of Data array when discourse integration works + return ( + <> + + {Data.map((item) => ( + + +
+ {item.title} +
+
+ {item.time} +
+ + + + + + {item.upvotes} + + + + + + {item.comments} + + + + ))} - - - ) + + + ); } -export default Discourserankedlist \ No newline at end of file +export default Discourserankedlist; diff --git a/app/components/footer.js b/app/components/footer.js index 18da30d4..aaa9808c 100644 --- a/app/components/footer.js +++ b/app/components/footer.js @@ -1,22 +1,20 @@ -import styles from "../styles/Footer.module.css" -import Image from "next/image" +import Image from 'next/image'; function Footer() { - return ( - <> - - - - - ) - - + return ( + <> + + + ); } -export default Footer \ No newline at end of file +export default Footer; diff --git a/app/components/growthcounters.js b/app/components/growthcounters.js index b5a094ca..007236b6 100644 --- a/app/components/growthcounters.js +++ b/app/components/growthcounters.js @@ -1,34 +1,38 @@ -import styles from "../styles/Growthcounters.module.css" -import Countup from "./clientsideonly/countup" -import { FaGlobe, FaComments, FaUsers } from "react-icons/fa" +import styles from '../styles/Growthcounters.module.css'; +import Countup from './clientsideonly/countup'; + export default function Growthcounters() { - return ( - <> - - -   - - {process.browser && } - -   - Users -     - -   - - {process.browser && } - -   - Messsages -     - -   - - {process.browser && } - -   - Online - - - ) -} \ No newline at end of file + return ( + <> +
+
+ + {process.browser && ( + + )} + + + Users +
+ +
+ + {process.browser && ( + + )} + + Messages +
+ +
+ + {process.browser && ( + + )} + + Online +
+
+ + ); +} diff --git a/app/components/infotiles.js b/app/components/infotiles.js index fe39926a..02221316 100644 --- a/app/components/infotiles.js +++ b/app/components/infotiles.js @@ -1,38 +1,35 @@ -// import { Navbar, Nav, NavDropdown } from "react-bootstrap"; -import styles from '../styles/Infotiles.module.css' -export default function Infotiles() { - return( - <> -
- -

Documentation →

-

Find in-depth information about Rocket.Chat features and API.

- - - -

Learn →

-

Learn about Rocket.Chat in an interactive course with quizzes!

- +import Styles from '../styles/Infotiles.module.css'; - -

Examples →

-

Discover and deploy boilerplate example Rocket.Chat projects.

- - - -

Deploy →

-

- Instantly deploy your Rocket.Chat site to a public URL with Rocket.Chat SaaS. -

- +export default function Infotiles() { + return ( + <> +
+
+
Documentation
+

+ Find in-depth information about Rocket.Chat features and API. +

- - ) - -} \ No newline at end of file +
+
Learn
+

+ Learn about Rocket.Chat in an interactive course with quizzes! +

+
+
+
Examples
+

+ Discover and deploy boilerplate example Rocket.Chat projects. +

+
+
+
Deploy
+

+ Instantly deploy your Rocket.Chat site to a public URL with + Rocket.Chat SaaS. +

+
+
+ + ); +} diff --git a/app/components/layout.js b/app/components/layout.js index 0062560c..e418203b 100644 --- a/app/components/layout.js +++ b/app/components/layout.js @@ -1,17 +1,15 @@ -import styles from '../styles/Layout.module.css' -import Footer from './footer' -import Menubar from './menubar' - +//import styles from '../styles/Layout.module.css'; +import Footer from './footer'; +import Menubar from './menubar'; function Layout(props) { - - return ( - <> - - {props.children} -
- - ) + return ( + <> + + {props.children} +
+ + ); } -export default Layout \ No newline at end of file +export default Layout; diff --git a/app/components/menubar.js b/app/components/menubar.js index 22e93088..5950b194 100644 --- a/app/components/menubar.js +++ b/app/components/menubar.js @@ -1,8 +1,10 @@ import { Navbar, Nav, NavDropdown } from "react-bootstrap"; import styles from '../styles/Menubar.module.css' import { AuthMenuButton } from "./auth/AuthMenuButton"; -export default function Menubar(props) { +import styles from '../styles/Menubar.module.css'; +export default function Menubar(props) { + return ( <> @@ -28,4 +30,4 @@ export default function Menubar(props) { ) -} \ No newline at end of file +} diff --git a/app/components/newscarousel.js b/app/components/newscarousel.js index c1e40115..1bef8341 100644 --- a/app/components/newscarousel.js +++ b/app/components/newscarousel.js @@ -1,70 +1,98 @@ -import { Image} from "react-bootstrap" -import styles from "../styles/Newscarousel.module.css" -import Slider from "react-slick"; -import "slick-carousel/slick/slick.css"; -import "slick-carousel/slick/slick-theme.css"; +import styles from '../styles/Newscarousel.module.css'; +import Slider from 'react-slick'; +import 'slick-carousel/slick/slick.css'; +import 'slick-carousel/slick/slick-theme.css'; const Item = (props) => { - console.log(props.item.imageUrl) - return ( -
- - -

{props.item.name}

- -

{props.item.description}

-
- ); - }; - + return ( +
+ + +
+

{props.item.name}

+

{props.item.description}

+
+ +
+ ); +}; function Newscarousel(props) { - return( - <> - } - nextArrow={} - > - {props.carousels.map((item, i) => ( - - ))} - - - ) + return ( + <> + + + + } + nextArrow={ + + + + } + > + {props.carousels.map((item, i) => ( + + ))} + + + ); } -export default Newscarousel \ No newline at end of file +export default Newscarousel; diff --git a/app/components/personalcircle.js b/app/components/personalcircle.js index 448bf158..802bf315 100644 --- a/app/components/personalcircle.js +++ b/app/components/personalcircle.js @@ -1,18 +1,145 @@ -import { Button, ButtonGroup } from "react-bootstrap"; -import styles from '../styles/Personacircle.module.css' +import { Button, ButtonGroup, Col } from 'react-bootstrap'; +import styles from '../styles/Personacircle.module.css'; export default function Personacircle(props) { - return ( - <> - - - {props.personas.map((persona) => ( - - - - ))} + return ( + <> + + +
+ + + + + +
+
Admin
 - - - ) -} \ No newline at end of file + +
+ + + + + + +
+
Developer
+ + +
+ + + + + + +
+
Group Chat
+ + +
+ + + + + + + + +
+
GSoC
+ + + + ); +} diff --git a/app/components/searchbox.js b/app/components/searchbox.js index 6c75e8dc..5e588330 100644 --- a/app/components/searchbox.js +++ b/app/components/searchbox.js @@ -1,14 +1,54 @@ -import { Form } from "react-bootstrap"; -import styles from '../styles/Searchbox.module.css' -export default function Searchbox() { - return( - -
- - +import { Form, Dropdown, InputGroup } from 'react-bootstrap'; +import styles from '../styles/Searchbox.module.css'; - -
- - ) -} \ No newline at end of file +export default function Searchbox() { + return ( +
+ + + All Communities + + + Rooms + Users + Messages + + + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/app/next.config.js b/app/next.config.js index 0d607100..6b1b883b 100644 --- a/app/next.config.js +++ b/app/next.config.js @@ -1,3 +1,8 @@ +const path = require('path') + module.exports = { reactStrictMode: true, -} + sassOptions: { + includePaths: [path.join(__dirname, 'styles')], + }, +} \ No newline at end of file diff --git a/app/package.json b/app/package.json index 1a9bf24c..ec00f89d 100644 --- a/app/package.json +++ b/app/package.json @@ -12,6 +12,7 @@ "bootstrap": "^5.1.3", "firebase": "^9.6.3", "next": "12.0.7", + "node-sass": "^6.0.1", "react": "^17.0.2", "react-bootstrap": "^2.1.0", "react-dom": "17.0.2", diff --git a/app/pages/_app.js b/app/pages/_app.js index a4e39560..92c3aa33 100644 --- a/app/pages/_app.js +++ b/app/pages/_app.js @@ -1,6 +1,6 @@ -import '../styles/globals.css' -import 'bootstrap/dist/css/bootstrap.min.css' -import Layout from "../components/layout" +import '/styles/globals.css'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import Layout from '../components/layout'; import SSRProvider from 'react-bootstrap/SSRProvider'; import AuthProvider from '../components/auth/firebase/AuthProvider'; @@ -13,9 +13,7 @@ function MyApp({ Component, pageProps }) { - - ) + ); } - -export default MyApp \ No newline at end of file +export default MyApp; diff --git a/app/pages/index.js b/app/pages/index.js index a04ddd22..9c0174ca 100644 --- a/app/pages/index.js +++ b/app/pages/index.js @@ -1,87 +1,88 @@ -import Head from 'next/head' -import styles from '../styles/Home.module.css' +import Head from 'next/head'; +import styles from '../styles/Home.module.css'; import Infotiles from '../components/infotiles'; import Newscarousel from '../components/newscarousel'; import Personacircle from '../components/personalcircle'; import Discourserankedlist from '../components/discourserankedlist'; import Searchbox from '../components/searchbox'; import Growthcounters from '../components/growthcounters'; -import {Container, Row, Col } from "react-bootstrap" -import { fetchAPI } from "../lib/api"; +import { Container, Col } from 'react-bootstrap'; +import { fetchAPI } from '../lib/api'; export default function Home(props) { - - return ( <> - - - -
-
Create Next App - - + + + + +

+ Welcome to our community +

+

+ Let's dream, share, and collaborate in shaping the future of the + Rocket.Chat ecosystem together +

+ + +
Read the Guides | Read Release Notes
+ + + + + + + + -

- Welcome to our community -

- -

- Let's dream, share, and collaborate in shaping the future of the Rocket.Chat ecosystem together -

-

- Read the Guides | Read Release Notes -

- -

- -

- - +
+

+ Latest Community News +

+ +
- -

- Latest Community News +

+ Get What You Need...

- - + - -

- Get What You Need... -

- -

- Community Activity -

- -
-
- - - +
+

+ Community Activity +

+ +
+ - ) - } - export async function getStaticProps({ params }) { - const carousels = await fetchAPI("/carousels"); - const personas = await fetchAPI("/personas"); - const guides = await fetchAPI("/guides"); - const releaseNotes = await fetchAPI("/release-notes"); - const topNavItems = await fetchAPI("/top-nav-item"); - const topPosts = await fetchAPI("/discourses"); - - return { - props: { carousels, personas, guides, releaseNotes, topNavItems, topPosts }, - // Next.js will attempt to re-generate the page: - // - When a request comes in - // - At most once every 1 second - revalidate: 1, - }; - } - + ); +} +export async function getStaticProps({ params }) { + const carousels = await fetchAPI('/carousels'); + const personas = await fetchAPI('/personas'); + const guides = await fetchAPI('/guides'); + const releaseNotes = await fetchAPI('/release-notes'); + const topNavItems = await fetchAPI('/top-nav-item'); + const topPosts = await fetchAPI('/discourses'); + return { + props: { carousels, personas, guides, releaseNotes, topNavItems, topPosts }, + // Next.js will attempt to re-generate the page: + // - When a request comes in + // - At most once every 1 second + revalidate: 1, + }; +} diff --git a/app/public/svg/comment.js b/app/public/svg/comment.js new file mode 100644 index 00000000..f96c7114 --- /dev/null +++ b/app/public/svg/comment.js @@ -0,0 +1,14 @@ +export default function comment() { + return ( + + + + ); +} diff --git a/app/public/svg/like.js b/app/public/svg/like.js new file mode 100644 index 00000000..f37f1304 --- /dev/null +++ b/app/public/svg/like.js @@ -0,0 +1,14 @@ +export default function like() { + return ( + + + + ); +} diff --git a/app/styles/Discourserankedlist.module.css b/app/styles/Discourserankedlist.module.css index e69de29b..5893ee1f 100644 --- a/app/styles/Discourserankedlist.module.css +++ b/app/styles/Discourserankedlist.module.css @@ -0,0 +1,24 @@ +.container { + max-width: 90rem; +} +.item_container { + width: 80vw; +} +.heading { + font-size: clamp(10px, 4.6vw, 16px); +} +.time { + font-size: clamp(8px, 3.6vw, 16px); +} +.numbers{ + font-size: clamp(8px, 3.6vw, 16px); +} +.coloumn { + background: #f7f8fa; + max-width: 40rem; +} +@media (min-width: 768px) { + .item_container { + width: clamp(18rem, 36vw, 36rem); + } +} diff --git a/app/styles/Growthcounters.module.css b/app/styles/Growthcounters.module.css index 0a6d42d9..bc82d357 100644 --- a/app/styles/Growthcounters.module.css +++ b/app/styles/Growthcounters.module.css @@ -1,11 +1,8 @@ -.icon { - font-size: "120px"; - color: "red"; +.countup { + font-size: clamp(16px, 5vw, 32px); + color: #f5455c; +} +.text { + font-size: clamp(12px, 3vw, 20px); + font-weight: 300; } - -.react-icons { - font-size: "120px"; - color: "red"; - vertical-align: middle; - -} \ No newline at end of file diff --git a/app/styles/Home.module.css b/app/styles/Home.module.css index 73a91c57..d2190e81 100644 --- a/app/styles/Home.module.css +++ b/app/styles/Home.module.css @@ -1,211 +1,22 @@ -.container { - padding: 0 2rem; +.redText { + color: #f5455c; } -.main { - min-height: 100vh; - padding: 4rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; +.hero_heading { + color: #030c1a; } -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; +.hero_subheading { + color: #87898d; + font-size: clamp(16px, 4.5vw, 20px); } -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - -.title a { - color: #0070f3; - text-decoration: none; -} - -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; +.community_news { + background-color: #f7f8fa; + width: 98vw; + overflow: hidden; } .title { - margin: 0; - line-height: 1.15; - font-size: 2rem; -} - -.title, -.description { - text-align: center; -} - -.description { - margin: 4rem 0; - line-height: 1.5; - font-size: 15px; -} - -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; -} - -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; -} - -.card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; - max-width: 300px; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; - margin-left: 0.5rem; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} -.home-wrapper { - font-family: "Poppins", sans-serif; - font-weight: 400; - font-size: 15px; - overflow-y: auto; -} - -.home-content-wrapper { - margin: 20px 70px; - padding: 20px 20px 20px 30px; -} - - -.featured-content-heading { - text-align: center; - margin-bottom: 40px; - color: hsl(240, 6%, 17%); - font-weight: 200; -} - -.select-role-heading { - text-align: center; - margin-top: 30px; - margin-bottom: 60px; - color: hsl(240, 6%, 17%); - font-weight: 200; -} - -.select-role-buttons-row { - display: flex; - flex-direction: row; - justify-content: space-evenly; - margin-bottom: 100px; -} - -.select-role-button-icon { - height: 50px; - width: 50px; - margin-bottom: 20px; -} - -.communities-wrapper { - margin-bottom: 60px; - margin-top: 30px; -} - -.community-activity-wrapper { - display: flex; - flex-direction: row; -} - -.community-activity-content { - display: flex; - flex-direction: row; - align-items: center; - width: 80%; -} - -.community-activity-author-image { - border-radius: 50%; - height: 40px; - width: 40px; - margin-right: 20px; -} - -.community-activity-heading { - margin-right: 40px; -} - -.community-activity-info { - color: hsl(240, 5%, 36%); -} - -.community-activity-actions-wrapper { - display: flex; - flex-direction: row; - width: 20%; -} - -.community-activity-action { - display: flex; - width: 50%; - align-items: center; -} - -.community-activity-action-button { - height: 25px; - width: 25px; - margin-right: 15px; - margin-left: 30px; -} - -.community-activity-action-button:hover { - cursor: pointer; + font-size: clamp(22px, 4.6vw, 30px); } diff --git a/app/styles/Infotiles.module.css b/app/styles/Infotiles.module.css index d2b0879d..569348cb 100644 --- a/app/styles/Infotiles.module.css +++ b/app/styles/Infotiles.module.css @@ -1,39 +1,32 @@ +.cards { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + max-width: 38rem; +} -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; - } - - .card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; - max-width: 300px; - } - - .card:hover, - .card:focus, - .card:active { - color: #0070f3; - border-color: #0070f3; - } - - .card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; - } - - .card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; - } - \ No newline at end of file +.card { + width: clamp(15rem, 24vw, 17rem); + height: clamp(8rem, 16vw, 11rem); + background-color: #f7f8fa; + border-radius: 6px; + margin: clamp(0.4rem, 2vw, 1rem); + padding: clamp(1.4rem, 2vw, 1.8rem); +} + +.card_heading { + font-size: clamp(1rem, 1.4vw, 1.4rem); + padding-bottom: 8px; +} + +.card_body { + font-size: clamp(0.85rem, 1.3vw, 1rem); + font-weight: 300; +} + +.card:hover, +.card:active { + background: #1d74f5; + color: white; +} diff --git a/app/styles/Menubar.module.css b/app/styles/Menubar.module.css index 82a7ef94..3d1fe61a 100644 --- a/app/styles/Menubar.module.css +++ b/app/styles/Menubar.module.css @@ -1,8 +1,102 @@ -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; - } \ No newline at end of file +.brand { + font-size: clamp(16px, 2.4vw, 20px); +} + +.navbarItem { + transition: all 0.5s; +} +.dropdown-toggle::after { + display: none !important; +} + +.navbarItem::after { + position: absolute; + bottom: 0; + left: 0; + right: 0; + margin: auto; + background-color: #ff5050; + color: transparent; + width: 0%; + content: '.'; + height: 2px; +} + +.navbarItem:hover:after { + width: 100%; +} + +.my-dropdown-toggle:after { + display: none; +} + +.chat { + border-bottom-left-radius: 10px; + border-top-right-radius: 10px; +} + +/* reseting the default styles */ +.default_toggler, +.default_toggler:hover, +.default_toggler:active, +.default_toggler:focus { + border: 0; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; +} + +.navbar_toggler { + width: 30px; + height: 20px; + position: relative; + transition: 0.5s ease-in-out; +} + +.navbar_toggler, +.navbar_toggler:focus, +.navbar_toggler:active, +.toggler_icon:focus { + outline: none; + box-shadow: none; + border: 0; +} + +.toggler_icon { + margin: 0; + padding: 0; + display: block; + position: absolute; + height: 2px; + width: 100%; + background: rgb(107, 107, 107); + border-radius: 1px; + opacity: 1; + left: 0; + transform: rotate(0deg); + transition: 0.25s ease-in-out; +} + +/* when navigation is clicked */ +.top_bar { + margin-top: 0px; + transform: rotate(-135deg); +} + +.bottom_bar { + margin-top: 0px; + transform: rotate(-45deg); +} + +/* state when the navbar is collapsed or collapsed==true */ +.top_bar_collapsed { + margin-top: -10px; + transform: rotate(0deg); +} + +.bottom_bar_collapsed { + margin-top: 10px; + transform: rotate(0deg); +} diff --git a/app/styles/Newscarousel.module.css b/app/styles/Newscarousel.module.css index 1dae39e9..3ce5ad8d 100644 --- a/app/styles/Newscarousel.module.css +++ b/app/styles/Newscarousel.module.css @@ -1,107 +1,28 @@ +.slider { + width: 95%; + max-width: 90rem; + align-self: center; +} -.signed-home-main { - display: flex; - flex-direction: row; - justify-content: space-between; - } - - .signed-home-header { - margin-bottom: 50px; - } - - .signed-home-header p { - font-size: 0.9em; - line-height: 27px; - color: #252525; - } - - .signed-home-shortcut-container { - margin-bottom: 50px; - } - - .signed-home-shortcut-container h5 { - font-size: 0.9em; - } - - .signed-home-shortcut { - background-color: #e3e9fe66; - padding: 14px; - border-radius: 5px; - font-size: 0.9em; - cursor: pointer; - display: flex; - align-items: center; - } - - .signed-home-shortcut:hover { - background-color: #dae0f7b0; - } - - .shortcut-icon-small { - width: 1.5em; - height: 1.5em; - margin-right: 7px; - } - - .shortcut-icon-medium { - width: 1.7em; - height: 1.7em; - margin-right: 5px; - } - - .select-role-button { - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - border-radius: 50%; - height: 150px; - width: 150px; - border: 5px solid #ee4a5b; - } - - .select-role-button:hover { - border: 5px solid #2f343d; - cursor: pointer; - } - +.carousel-item-link { + text-decoration: none; + color: #000000; + outline: none; +} -.carousel-item-wrapper { - margin: 20px; - text-align: center; - } - - .slick-prev { - width: 30px !important; - height: 30px !important; - z-index: 1; - } - .slick-next { - width: 30px !important; - height: 30px !important; - z-index: 1; - } - - .carousel-slider { - margin: 40px 20px 60px 20px; - } - - .carousel-item-link { - text-decoration: none; - color: #000000; - outline: none; - } - - .carousel-item-image { - width: 100%; - height: 100%; - } - - .carousel-item-description { - color: hsl(240, 5%, 36%); - } - .carousel-item-title { +.carousel-item-image { + width: 100%; + height: 100%; +} - font-size: 22.5px; +.heading { + font-size: clamp(0.8rem, 1.7vw, 1.2rem); +} - } \ No newline at end of file +.description { + font-size: clamp(0.6rem, 1.2vw, 0.8rem); +} + +.carousel-item-title { + font-size: 22.5px; +} diff --git a/app/styles/Personacircle.module.css b/app/styles/Personacircle.module.css index e69de29b..00c18e29 100644 --- a/app/styles/Personacircle.module.css +++ b/app/styles/Personacircle.module.css @@ -0,0 +1,20 @@ +/* .personas { + display: flex; + gap: 10rem; +} */ +.persona { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + gap: 1rem; + width: clamp(8rem, 14vw, 20rem); + margin: 0.2rem; + padding-bottom: 1rem; +} +.svg { + width: clamp(3rem, 4vw, 4rem); +} +.title { + font-size: clamp(0.9rem, 2vw, 1.4rem); +} diff --git a/app/styles/Searchbox.module.css b/app/styles/Searchbox.module.css index 82a7ef94..18d3b180 100644 --- a/app/styles/Searchbox.module.css +++ b/app/styles/Searchbox.module.css @@ -1,8 +1,19 @@ -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; - } \ No newline at end of file +.form { + width: clamp(12rem, 80vw, 48rem); +} +.dropdown { + color: gray; + font-weight: regular; + background-color: #fff; + border: 1px solid rgba(195, 195, 195, 0.781); +} +.dropdown:hover { + color: gray; + background-color: #fff; +} +.dropdown:active { + background-color: #fff; +} +.dropdown:checked { + background-color: #fff; +} \ No newline at end of file diff --git a/app/styles/globals.css b/app/styles/globals.css index e5e2dcc2..d665557b 100644 --- a/app/styles/globals.css +++ b/app/styles/globals.css @@ -1,9 +1,11 @@ +@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); + html, body { padding: 0; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, + Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } a {