diff --git a/.eslintrc.json b/.eslintrc.json index 24cc638..b07caaf 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -9,12 +9,13 @@ "extends": [ "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", - "plugin:@typescript-eslint/recommended" + "plugin:@typescript-eslint/recommended", + "plugin:react-hooks/recommended" ], "rules": { "@typescript-eslint/explicit-module-boundary-types": "off", "@typescript-eslint/no-explicit-any": "off", - "indent": ["error", 2], + "indent": ["error", 2, { "SwitchCase": 1, "ignoredNodes": ["ConditionalExpression"] }], "no-multi-spaces": ["error"], "semi": ["error", "always"] } diff --git a/.github/workflows/develop.yml b/.github/workflows/develop.yml index a50ed51..d1f8233 100644 --- a/.github/workflows/develop.yml +++ b/.github/workflows/develop.yml @@ -19,7 +19,6 @@ jobs: deploy_job: runs-on: ubuntu-latest name: build&deploy - if: github.event.pull_request.merged == true steps: # To use this repository's private action, you must check out the repository - name: Checkout diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml index ecea6f2..7b45402 100644 --- a/.github/workflows/production.yml +++ b/.github/workflows/production.yml @@ -19,7 +19,6 @@ jobs: deploy_job: runs-on: ubuntu-latest name: build&deploy - if: github.event.pull_request.merged == true steps: # To use this repository's private action, you must check out the repository - name: Checkout diff --git a/.prettierrc.json b/.prettierrc.json index cf09acd..ec5aeff 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -3,5 +3,6 @@ "tabWidth": 2, "semi": true, "singleQuote": true, - "bracketSpacing": true + "bracketSpacing": true, + "printWidth": 120 } diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..7a73a41 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/package.json b/package.json index 73a1061..531ccc5 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,6 @@ "@types/react-router-dom": "^5.1.7", "@walletconnect/web3-provider": "^1.6.5", "@widgetbot/react-embed": "^1.4.0", - "axios": "^0.21.1", "dids": "^2.4.0", "evm-chains": "^0.2.0", "ipfs-http-client": "^55.0.0", @@ -64,6 +63,7 @@ }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.2.0", - "@typescript-eslint/parser": "^5.2.0" + "@typescript-eslint/parser": "^5.2.0", + "eslint-plugin-react-hooks": "^4.3.0" } } diff --git a/public/images/brands/discord--3d.png b/public/images/brands/discord--3d.png new file mode 100644 index 0000000..3ba078e Binary files /dev/null and b/public/images/brands/discord--3d.png differ diff --git a/public/images/exploremore.jpg b/public/images/exploremore.jpg deleted file mode 100644 index 33fdafb..0000000 Binary files a/public/images/exploremore.jpg and /dev/null differ diff --git a/public/images/pepe.png b/public/images/pepe.png deleted file mode 100644 index 0d3166a..0000000 Binary files a/public/images/pepe.png and /dev/null differ diff --git a/public/images/blockchain.svg b/public/images/worlds/blockchain.svg similarity index 100% rename from public/images/blockchain.svg rename to public/images/worlds/blockchain.svg diff --git a/public/images/Dapps.svg b/public/images/worlds/dapps.svg similarity index 100% rename from public/images/Dapps.svg rename to public/images/worlds/dapps.svg diff --git a/public/images/python.svg b/public/images/worlds/python.svg similarity index 100% rename from public/images/python.svg rename to public/images/worlds/python.svg diff --git a/public/images/trading.svg b/public/images/worlds/trading.svg similarity index 100% rename from public/images/trading.svg rename to public/images/worlds/trading.svg diff --git a/public/images/world_introduction.svg b/public/images/worlds/world_introduction.svg similarity index 100% rename from public/images/world_introduction.svg rename to public/images/worlds/world_introduction.svg diff --git a/src/App.tsx b/src/App.tsx index 7776ce2..5fde8eb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,59 +1,59 @@ -import { Route, HashRouter as Router, Switch, Redirect } from "react-router-dom"; -import "./assets/css/koios.scss"; -import { Worlds } from "./pages/Worlds"; -import { WorldDetail } from "./pages/WorldDetail/WorldDetail"; -import { Layout } from "./components/Layout/Layout"; -import { Leaderboard } from "./pages/Leaderboard"; -import WorldOverview from "./pages/WorldOverview"; -import { Profile } from "./pages/Profile"; -import { ComingSoon } from "./pages/ComingSoon"; -import { useMemo, useState } from "react"; -import { UserContext } from "./Context/UserContext"; -import { Error404 } from "./pages/Error404"; -import Contribute from "./pages/Contribute"; -import ScrollToTop from "./components/Util/scrollTop"; -import ExplanationVideos from "./pages/ExplanationVideos"; -import Earn from "./pages/Earn"; -import VacancyDetail from "./pages/VacancyDetail"; -import { MarkdownEditor } from "./pages/MarkdownEditor"; +import { Route, HashRouter as Router, Switch, Redirect } from 'react-router-dom'; +import './assets/css/koios.scss'; +import { Worlds } from './pages/Worlds'; +import { WorldDetail } from './pages/WorldDetail/WorldDetail'; +import { Layout } from './components/Layout/Layout'; +import { Leaderboard } from './pages/Leaderboard'; +import WorldOverview from './pages/WorldOverview'; +import { Profile } from './pages/Profile/Profile'; +import { ComingSoon } from './pages/ComingSoon'; +import { Error404 } from './pages/Error404'; +import Contribute from './pages/Contribute'; +import ScrollToTop from './components/Util/scrollTop'; +import ExplanationVideos from './pages/ExplanationVideos'; +import Earn from './pages/Earn'; +import VacancyDetail from './pages/VacancyDetail'; +import { MarkdownEditor } from './pages/MarkdownEditor'; +import { AuthContextProvider } from './Context/AuthContext'; +import { UserContextProvider } from './Context/UserContext'; export const App = () => { - const [user, setUser] = useState(null); - const providerValue = useMemo(() => ({ user, setUser }), [user, setUser]); return ( - - - - - - - - - - - + + + + + - - - - - - - - - - - - - - + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/src/Context/AuthContext.tsx b/src/Context/AuthContext.tsx new file mode 100644 index 0000000..4c8ce1f --- /dev/null +++ b/src/Context/AuthContext.tsx @@ -0,0 +1,27 @@ +import { createContext, useState } from "react"; + +export const AuthContext = createContext(null); + +export const AuthContextProvider = (props) => { + const [isAuthenticated, setIsAuthenticated] = useState(false); + const [isAuthenticating, setIsAuthenticating] = useState(false); + const [authError, setAuthError] = useState(null); + const [provider, setProvider] = useState(null); + + const providerValue = { + isAuthenticated, + setIsAuthenticated, + isAuthenticating, + setIsAuthenticating, + authError, + setAuthError, + provider, + setProvider + }; + + return ( + + {props.children} + + ); +}; diff --git a/src/Context/UserContext.tsx b/src/Context/UserContext.tsx index cab0f68..54815ad 100644 --- a/src/Context/UserContext.tsx +++ b/src/Context/UserContext.tsx @@ -1,3 +1,19 @@ -import { createContext } from "react"; +import { createContext, useState } from "react"; +import { UserAccount, UserAccountContext } from "../types/UserProfile/UserAccount"; -export const UserContext = createContext(null); \ No newline at end of file +export const UserContext = createContext({} as UserAccountContext); + +export const UserContextProvider: React.FC = (props) => { + const [userAccount, setUserAccount] = useState(null); + + const providerValue: UserAccountContext = { + userAccount, + setUserAccount + }; + + return ( + + {props.children} + + ); +}; diff --git a/src/api/Api.ts b/src/api/Api.ts index a019e65..3b079c8 100644 --- a/src/api/Api.ts +++ b/src/api/Api.ts @@ -5,7 +5,7 @@ type getLiteratureProps = { }; export const getVideoInfo = async (levelAddress) => { - const baseUrl = "https://cloudflare-ipfs.com/ipfs/"; + const baseUrl = 'https://cloudflare-ipfs.com/ipfs/'; try { const getVideos = await fetch(`${baseUrl + levelAddress}`); const videos = await getVideos.json(); @@ -16,16 +16,13 @@ export const getVideoInfo = async (levelAddress) => { }; export const getLiterature = async (props: getLiteratureProps) => { - const baseUrl = - "https://raw.githubusercontent.com/koiosonline/literature/main"; + const baseUrl = 'https://raw.githubusercontent.com/koiosonline/literature/main'; const world = props.world; const worldLevel = props.worldLevel; const article = props.article; try { - const fetchLiteratureFile = await fetch( - `${baseUrl}/${world}/${worldLevel}/${article}` - ); + const fetchLiteratureFile = await fetch(`${baseUrl}/${world}/${worldLevel}/${article}`); if (fetchLiteratureFile.ok) { return await fetchLiteratureFile.text(); @@ -35,4 +32,20 @@ export const getLiterature = async (props: getLiteratureProps) => { } catch (e) { console.log(e); } -}; \ No newline at end of file +}; + +export const getDiscordProfile = async (discordUsername: string) => { + const baseUrl = process.env.REACT_APP_DISCORD_LEVELS; + + if (discordUsername) { + try { + const getDiscordProfileData = await fetch(`${baseUrl + discordUsername}`); + const discordProfileData = await getDiscordProfileData.json(); + return discordProfileData[0]; + } catch (e) { + console.log(e); + } + } + + return undefined; +}; diff --git a/src/assets/css/base/_grid.scss b/src/assets/css/base/_grid.scss index cfe2f84..5e9dd3a 100644 --- a/src/assets/css/base/_grid.scss +++ b/src/assets/css/base/_grid.scss @@ -3,6 +3,7 @@ padding-right: 15px; margin-left: auto; margin-right: auto; + max-width: 1080px; } .content-container { diff --git a/src/assets/css/base/_main.scss b/src/assets/css/base/_main.scss index 63f9e3d..8260e45 100644 --- a/src/assets/css/base/_main.scss +++ b/src/assets/css/base/_main.scss @@ -1,3 +1,7 @@ +body { + background-color: $color-07; +} + .main { width: 100%; height: calc(100% - 58px); @@ -11,7 +15,7 @@ background-repeat: no-repeat; margin-top: 60px; - @include for-size($desktop) { + @include for-size(1200px) { margin-left: 300px; margin-top: 0; } @@ -22,6 +26,14 @@ text-decoration: none; } +.icon { + position: relative; + width: 1em; + height: 1em; + vertical-align: -0.15em; + fill: currentColor; +} + ::-webkit-scrollbar { width: 0; @include for-size($desktop) { @@ -44,4 +56,3 @@ ::-webkit-scrollbar-thumb:hover { background: #555; } - diff --git a/src/assets/css/base/_reset.scss b/src/assets/css/base/_reset.scss index 2f0ee51..c144631 100644 --- a/src/assets/css/base/_reset.scss +++ b/src/assets/css/base/_reset.scss @@ -120,7 +120,7 @@ button { } svg { - display: block; + display: inline-block; width: 100%; height: 100%; } diff --git a/src/assets/css/components/_Button.scss b/src/assets/css/components/_Button.scss deleted file mode 100644 index ec558b8..0000000 --- a/src/assets/css/components/_Button.scss +++ /dev/null @@ -1,81 +0,0 @@ -.b-koios, .b-koios:before { - background: $gradient-koios; - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#1abc9c', GradientType=1 ); -} - -.button-container { - display: block; - text-align: center; - .button:after { - background: white; - } - .button { - display: inline-block; - position: relative; - border-radius: $radius; - text-decoration: none; - padding: .5em 2.5em; - margin: 1em 0; - transition: all .1s; - //background: white; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-family: "Source Sans Pro", sans-serif; - font-weight: 600; - font-size: 0.9rem; - box-shadow: $button-shadow; - p { - background: $gradient-koios; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-family: "Source Sans Pro", sans-serif; - font-weight: 600; - font-size: 0.9rem; - } - @media (max-width: $mobile) { - font-size: 0.9rem; - } - } - .button:active { - background: $button-active-color; - } - .button:hover { - box-shadow: $button-shadow-hover; - } - .button:hover:after { - left: 0; - top: 0; - bottom: 0; - right: 0; - } - .button:before { - content: ''; - display: block; - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; - z-index: -1; - border-radius: $radius; - transition: all 0.1s; - &:active { - background-color: $button-active-color; - } - } - .button:after { - content: ''; - display: block; - position: absolute; - left: 2px; - top: 2px; - bottom: 2px; - right: 2px; - z-index: -1; - border-radius: 8px; - transition: all .1s ease; - &:active { - background-color: $button-active-color; - } - } -} \ No newline at end of file diff --git a/src/assets/css/components/_Card.scss b/src/assets/css/components/_Card.scss deleted file mode 100644 index 281d292..0000000 --- a/src/assets/css/components/_Card.scss +++ /dev/null @@ -1,100 +0,0 @@ -.cardContainer { - display: grid; - grid-gap: 2em; - grid-template-columns: repeat(auto-fill, 19em); - flex-direction: row; - justify-content: space-evenly; - flex-wrap: wrap; - margin: 6em auto 0; - max-width: 1080px; - @include for-size($mobile, $desktop) { - padding: 0 2rem; - } - &__card { - display: flex; - flex-direction: column; - width: 19em; - padding: 1em; - border-radius: 20px; - box-shadow: 0px 0px 21px -10px rgba(110,110,110,0.5); - transition: all 0.2s ease; - margin-bottom: 2em; - background-color: white; - text-decoration: none; - @include for-size($mobile, $desktop) { - width: 19em; - } - &:hover { - box-shadow: 0px 0px 21px -10px rgba(110,110,110,1); - transform: translateY(-0.5em); - } - &__img { - width: 10em; - height: 10em; - margin: auto; - } - &__text { - flex-grow: 1; - &__title { - margin: 1rem 0 0.5em; - color: $color-koios-dark-grey; - } - &__metaData { - display: flex; - flex-direction: row; - margin-bottom: 1em; - p { - display: flex; - flex-direction: row; - margin-right: 1em; - color: #bdbdbd; - .clock { - align-self: center; - margin-right: 0.5em; - width: 1em; - height: 1em; - fill: currentColor; - } - } - } - } - &__description { - text-align: left; - margin-bottom: 3em; - font-family: "Source Sans Pro", sans-serif; - flex-grow: 1; - max-height: 6.5em; - display: -webkit-box; - -webkit-line-clamp: 5; - -webkit-box-orient: vertical; - overflow: hidden; - color: $color-koios-dark-grey; - @include for-size($desktop) { - max-height: 6.2em; - } - } - &__link { - text-decoration: none; - padding: 0.35em 3em; - border-radius: $radius; - box-shadow: $button-shadow; - font-family: "Source Sans Pro", sans-serif; - font-weight: 600; - transition: all 0.2s ease; - margin: 0 auto; - align-self: flex-end; - p { - background: $gradient-koios; - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - &:hover { - box-shadow: $button-shadow-hover; - } - &:active { - background-color: $button-active-color; - } - } - } -} diff --git a/src/assets/css/components/_LinkCard.scss b/src/assets/css/components/_LinkCard.scss deleted file mode 100644 index aea0480..0000000 --- a/src/assets/css/components/_LinkCard.scss +++ /dev/null @@ -1,86 +0,0 @@ -.linkCardContainer { - display: flex; - flex-direction: row; - flex-wrap: wrap; - //max-width: 1080px; - justify-content: center; - margin: 5vh auto; - @include for-size($desktop) { - justify-content: space-between; - margin: 5vh 0; - } - &__card { - display: flex; - flex-direction: column; - min-height: 30em; - width: 19em; - padding: 1em; - border-radius: 20px; - box-shadow: 0px 0px 21px -10px rgba(110,110,110,0.5); - transition: all 0.2s ease; - margin-bottom: 2em; - margin-right: 1em; - margin-left: 1em; - @include for-size($mobile, $desktop) { - width: 19em; - } - &__continueButton { - width: 100%; - margin: 0 auto 1em; - div { - a { - padding: 1em 3em !important; - width: 100%; - } - } - } - &:hover { - box-shadow: 0px 0px 21px -10px rgba(110,110,110,1); - transform: translateY(-0.5em); - } - &__title { - text-align: center; - font-family: Righteous, sans-serif; - font-size: 2em; - margin-bottom: 1em; - } - &__link { - text-decoration: none; - padding: 1em 3em; - width: 100%; - text-align: center; - border-radius: $radius; - box-shadow: $button-shadow; - font-family: "Source Sans Pro", sans-serif; - font-weight: 600; - transition: all 0.2s ease; - margin: 0 auto 2em; - align-self: flex-end; - p { - background: $gradient-koios; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - &:hover { - box-shadow: $button-shadow-hover; - } - &:active { - background-color: $button-active-color; - } - } - &__default-link { - text-decoration: none; - margin-bottom: 1em; - font-family: "Source Sans Pro", sans-serif; - font-weight: 600; - font-size: 1.125em; - color: $color-text; - transition: all 0.2s ease; - &:hover { - background: $gradient-koios; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - } - } -} \ No newline at end of file diff --git a/src/assets/css/components/_QuickLinks.scss b/src/assets/css/components/_QuickLinks.scss index 5763d6d..d74071b 100644 --- a/src/assets/css/components/_QuickLinks.scss +++ b/src/assets/css/components/_QuickLinks.scss @@ -13,26 +13,7 @@ grid-template-columns: repeat(auto-fit, 1fr); } - &__link { - text-decoration: none; - font-family: "Source Sans Pro", sans-serif; - font-weight: 400; - text-align: center; - padding: 0.25em 1em; - border-radius: $radius; - box-shadow: $button-shadow; - transition: all 0.2s ease; - white-space: nowrap; - p { - background: $gradient-koios; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - &:hover { - box-shadow: $button-shadow-hover; - } - &:active { - background-color: $button-active-color; - } + .btn { + width: 100%; } } diff --git a/src/assets/css/components/_course-card.scss b/src/assets/css/components/_course-card.scss new file mode 100644 index 0000000..28f87e8 --- /dev/null +++ b/src/assets/css/components/_course-card.scss @@ -0,0 +1,79 @@ +.course-card { + display: flex; + flex-direction: column; + width: 19em; + padding: 1em 1em 2em; + border-radius: 20px; + box-shadow: 0px 0px 21px -10px rgba(110, 110, 110, 0.5); + transition: all 0.2s ease; + margin-bottom: 2em; + background-color: white; + text-decoration: none; + + @include for-size($mobile, $desktop) { + width: 19em; + } + + &:hover { + box-shadow: 0px 0px 21px -10px rgba(110, 110, 110, 1); + transform: translateY(-0.5em); + } + + &__img { + width: 10em; + height: 10em; + margin: auto; + } + + &__heading { + flex-grow: 1; + } + + &__title { + margin: 1rem 0 0.5em; + color: $color-koios-dark-grey; + } + + .meta-data { + display: flex; + flex-direction: row; + margin-bottom: 1.5em; + + &__label { + background-color: $color-13; + color: $color-14; + font-size: 12px; + border-radius: 4px; + vertical-align: baseline; + padding: 2px 10px; + font-weight: bold; + margin-right: 1em; + + &--duration { + display: flex; + flex-direction: row; + + .icon { + align-self: center; + margin-right: 0.5em; + width: 1em; + height: 1em; + fill: currentColor; + } + } + } + } + + &__description { + max-height: 6.5em; + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + overflow: hidden; + color: $color-koios-dark-grey; + + @include for-size($desktop) { + max-height: 6.2em; + } + } +} diff --git a/src/assets/css/components/_markdown.scss b/src/assets/css/components/_markdown.scss index 3336142..573978e 100644 --- a/src/assets/css/components/_markdown.scss +++ b/src/assets/css/components/_markdown.scss @@ -21,6 +21,7 @@ img { width: 100%; + border-radius: 12px; } blockquote { @@ -65,6 +66,7 @@ padding: 16px 15px; margin-top: 10px; color: $color-koios-pink; + background-color: #fff; &:hover { color: $color-koios-blue; diff --git a/src/assets/css/components/_metablocks.scss b/src/assets/css/components/_metablocks.scss new file mode 100644 index 0000000..60e2a7a --- /dev/null +++ b/src/assets/css/components/_metablocks.scss @@ -0,0 +1,37 @@ +.metablocks { + .metablock { + background-color: #fff; + border-radius: 10px; + padding: 5px 15px; + font-size: 18px; + font-weight: 600; + color: $color-12; + min-width: 150px; + + &:not(:last-child) { + margin-right: 15px; + } + + &__title { + color: $color-09; + font-size: 16px; + margin-bottom: 3px; + } + + &__img { + width: 28px; + height: 28px; + } + + &__balance { + margin-left: 8px; + } + + &__img, + &__balance { + display: inline-block; + vertical-align: middle; + } + + } +} diff --git a/src/assets/css/components/_profile-banner.scss b/src/assets/css/components/_profile-banner.scss new file mode 100644 index 0000000..8e504af --- /dev/null +++ b/src/assets/css/components/_profile-banner.scss @@ -0,0 +1,158 @@ +.profile-banner { + border-radius: 20px; + height: 180px; + margin-bottom: 120px; + display: flex; + justify-content: center; + align-items: center; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + text-shadow: 2px 2px 4px #000; + color: #fff; + position: relative; + + @include for-size($desktop) { + margin-bottom: 15px; + height: 280px; + } + + .user-info { + font-family: $font-family-headings; + text-align: center; + display: none; + + @include for-size($desktop) { + display: block; + } + + &__name { + font-size: 55px; + } + + &__social { + display: inline-flex; + width: fit-content; + align-items: center; + color: #fff; + margin: 0 15px; + text-decoration: none; + font-family: $font-family-base; + font-weight: 600; + + .icon { + width: 18px; + margin-right: 5px; + fill: #fff; + } + } + } + + .profile-image-container { + background-color: #fff; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + width: 150px; + height: 150px; + box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1); + position: absolute; + bottom: -100px; + transition: transform 0.6s; + transform-style: preserve-3d; + margin: 0 auto; + + @include for-size($desktop) { + bottom: -75px; + left: 50px; + } + + &:hover { + transition: 2s; + transform: rotateY(360deg); + } + + &:after { + background-color: #fff; + background-image: #fff; + bottom: 0; + content: ''; + position: absolute; + top: 0; + width: 5px; + z-index: -10; + transform: rotateY(-90deg); + -webkit-transform: rotateY(-90deg); + transform-origin: 100% 50%; + -webkit-transform-origin: 100% 50%; + } + + &:before { + background-color: #fff; + background-image: #fff; + border-radius: 100%; + content: ''; + height: 150px; + left: 0; + position: absolute; + top: 0; + width: 150px; + transform: translateZ(-5px); + -webkit-transform: translateZ(-5px); + } + + &__img { + border-radius: 50%; + width: 130px; + height: 130px; + } + } + + .user-progress { + display: flex; + flex-direction: column-reverse; + position: absolute; + right: 0; + top: 0; + left: 0; + text-align: right; + margin: 15px; + + @include for-size($desktop) { + flex-direction: column; + top: unset; + left: unset; + bottom: 0; + width: 50%; + } + + &__level { + line-height: 1; + font-size: 16px; + display: flex; + justify-content: flex-end; + + @include for-size($desktop) { + align-items: baseline; + } + + &--number { + font-size: 40px; + margin-left: 5px; + margin-top: -5px; + } + } + + &__xp { + &--grey { + color: $color-09; + } + } + + &__bar { + width: 100%; + height: 5px; + } + } +} \ No newline at end of file diff --git a/src/assets/css/components/_progress-bar-profile-banner.scss b/src/assets/css/components/_progress-bar-profile-banner.scss new file mode 100644 index 0000000..3663bbb --- /dev/null +++ b/src/assets/css/components/_progress-bar-profile-banner.scss @@ -0,0 +1,41 @@ +.profile-banner { + .progress { + &-bar { + background-color: $color-09; + height: 2px; + border-radius: 2px; + } + + &-value { + display: block; + height: 6px; + transform: translateY(-25%); + border-radius: 12px; + background-image: -webkit-linear-gradient( + -45deg, + transparent 33%, + rgba(0, 0, 0, 0.1) 33%, + rgba(0, 0, 0, 0.1) 66%, + transparent 66% + ), + -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)), + -webkit-linear-gradient(left, $color-01, $color-02); + + background-size: 35px 20px, 100% 100%, 100% 100%; + -webkit-animation: animate-stripes 5s linear infinite; + animation: animate-stripes 5s linear infinite; + } + } + + @-webkit-keyframes animate-stripes { + 100% { + background-position: 100%; + } + } + + @keyframes animate-stripes { + 100% { + background-position: 100%; + } + } +} diff --git a/src/assets/css/components/_statistic-block.scss b/src/assets/css/components/_statistic-block.scss new file mode 100644 index 0000000..09d93cc --- /dev/null +++ b/src/assets/css/components/_statistic-block.scss @@ -0,0 +1,39 @@ +.statistic-block { + display: flex; + justify-content: center; + align-items: center; + background-color: #fff; + text-align: center; + padding: 15px 20px; + border-radius: 12px; + box-shadow: 0px 0px 21px -10px rgba(110, 110, 110, 0.5); + + &__img { + display: inline-block; + width: 50px; + margin-right: 15px; + } + + &__text-wrapper { + display: inline-block; + margin: 0 auto; + } + + &__title { + font-family: $font-family-headings; + font-size: 30px; + background: $gradient-koios; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + &__subtitle{ + color: $color-09; + font-size: 16px; + } + + &--left { + text-align: left; + } +} diff --git a/src/assets/css/components/profile-tabs/_overview-tab.scss b/src/assets/css/components/profile-tabs/_overview-tab.scss new file mode 100644 index 0000000..83a01e3 --- /dev/null +++ b/src/assets/css/components/profile-tabs/_overview-tab.scss @@ -0,0 +1,31 @@ +.overview-tab { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + column-gap: 20px; + row-gap: 15px; + + @include for-size(600px) { + grid-template-columns: repeat(2, 1fr); + } + + @include for-size(930px) { + grid-template-columns: repeat(3, 1fr); + } + + &__inactive { + text-align: center; + grid-column: 1 / 4; + margin: 50px auto; + color: $color-09; + width: 400px; + font-size: 20px; + font-style: italic; + line-height: 1.6; + + a { + color: $color-06; + text-decoration: underline; + } + } +} \ No newline at end of file diff --git a/src/assets/css/components/profile-tabs/_settings-tab.scss b/src/assets/css/components/profile-tabs/_settings-tab.scss new file mode 100644 index 0000000..d405ddb --- /dev/null +++ b/src/assets/css/components/profile-tabs/_settings-tab.scss @@ -0,0 +1,56 @@ +.settings-tab { + .settings { + display: flex; + flex-direction: column; + align-items: center; + + .btn { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fff; + padding: 5px 10px; + margin: 10px 0; + box-shadow: -2px 2px 4px rgb(0 0 0 / 15%); + border-radius: 8px; + cursor: pointer; + font-size: 14px; + max-width: 200px; + width: 100%; + text-align: right; + + a { + display: flex; + text-decoration: none; + justify-content: space-between; + width: 100%; + + &:visited { + color: inherit; + } + } + + &:hover { + color: $color-06; + fill: $color-06; + box-shadow: -2px 2px 4px rgb(0 0 0 / 30%); + + a { + fill: inherit; + } + } + + &:focus, + &:active { + background-color: #fafafa; + } + + .icon { + width: 20px; + height: 20px; + margin-right: 10px; + flex-shrink: 0; + } + } + } +} diff --git a/src/assets/css/koios.scss b/src/assets/css/koios.scss index ae7c76b..2b990f5 100644 --- a/src/assets/css/koios.scss +++ b/src/assets/css/koios.scss @@ -11,12 +11,12 @@ @import "./base/typography"; /* Pages */ -@import "src/assets/css/pages/Worlds"; -@import "src/assets/css/pages/WorldOverview"; +@import "./pages/worlds"; +@import "./pages/world-overview"; @import "./pages/coming-soon"; -@import "src/assets/css/pages/Worlds"; -@import "src/assets/css/pages/Profile"; -@import "src/assets/css/pages/WorldDetail"; +@import "./pages/authenticated"; +@import "./pages/unauthenticated"; +@import "./pages/WorldDetail"; @import "./pages/leaderboard"; @import "./pages/404"; @import "./pages/Contribute"; @@ -28,12 +28,17 @@ /* Layout */ @import "./layout/header"; @import "./layout/main-nav"; +@import "./layout/buttons"; + +/* Modals */ +@import "src/assets/css/modals/modal"; +@import "src/assets/css/modals/modal-wallet-setup"; /* Components */ -@import "src/assets/css/components/Button"; -@import "src/assets/css/components/Card"; +@import "src/assets/css/components/course-card"; +@import "./components/profile-tabs/overview-tab"; +@import "./components/profile-tabs/settings-tab"; @import "src/assets/css/components/QuickLinks"; -@import "src/assets/css/components/LinkCard"; @import "src/assets/css/components/TabInfo"; @import "src/assets/css/components/SetupModal"; @import "src/assets/css/components/Quiz"; @@ -47,6 +52,11 @@ @import "src/assets/css/components/vacanciesIntro"; @import "src/assets/css/components/VacancyCard"; @import "src/assets/css/components/markdown"; +@import "./components/progress-bar-profile-banner"; +@import "./components/metablocks"; +@import "./components/statistic-block"; +@import "./components/profile-banner"; + /* Font awesome */ @import "~@fortawesome/fontawesome-free/scss/fontawesome"; diff --git a/src/assets/css/layout/_buttons.scss b/src/assets/css/layout/_buttons.scss new file mode 100644 index 0000000..7e78c0e --- /dev/null +++ b/src/assets/css/layout/_buttons.scss @@ -0,0 +1,83 @@ +.btn { + border: none; + border-radius: 0; + padding: 0; + font-family: $font-family-base; + font-weight: bold; + font-size: 14px; + transition: all 0.5s ease; + cursor: pointer; + width: fit-content; + + &-primary { + background-color: #fff; + box-shadow: $button-shadow; + text-align: center; + border-radius: 8px; + text-decoration: none; + padding: 10px 20px; + + p { + @include gradient-text; + } + + &:hover { + box-shadow: $button-shadow-hover; + } + &:active { + background-color: $button-active-color; + } + } + + &-link { + @include gradient-text; + + &:hover { + background-size: 200%; + background-position: 0% 50%; + } + + &:active { + background-size: 200%; + background-position: 0% 50%; + background-image: linear-gradient(to right, darken($color-01, 10), darken($color-02, 10)); + } + } + + &-gradient { + color: #fff; + background-image: linear-gradient(to right, $color-01, $color-02); + border-radius: 8px; + padding: 5px 25px; + background-size: 100%; + + .icon-spinner { + margin-right: 10px; + animation: rotate 1.5s linear infinite; + } + + &:hover { + background-size: 200%; + background-position: 0% 50%; + } + + &:active { + background-size: 200%; + background-position: 0% 50%; + background-image: linear-gradient(to right, darken($color-01, 10), darken($color-02, 10)); + } + } + + // Helpers + + // Font-size modules + &--fs-16 { + font-size: 16px; + } +} + +@keyframes rotate { + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/src/assets/css/layout/_main-nav.scss b/src/assets/css/layout/_main-nav.scss index 97859cd..9d1c653 100644 --- a/src/assets/css/layout/_main-nav.scss +++ b/src/assets/css/layout/_main-nav.scss @@ -23,6 +23,7 @@ border-bottom: 2px solid rgba(60, 60, 60, 0.1); align-items: center; z-index: 1; + max-width: 100%; &__toggle { width: 30px; @@ -120,22 +121,12 @@ border-radius: $radius; font-family: inherit; white-space: nowrap; - color: #fff; font-weight: bold; font-size: 16px; - background-image: linear-gradient(to right, #ff0bac, #2f12dc); - background-size: 100%; cursor: pointer; transition: all 0.5s ease; text-align: center; min-width: 10em; - border: 2px solid white; - - &:hover { - background-image: linear-gradient(to right, #ff0bac, #2f12dc); - background-size: 200%; - background-position: 0% 50%; - } &--disconnect { background: #fff; @@ -167,6 +158,7 @@ background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; + color: $color-01; fill: $color-01; } @@ -175,6 +167,7 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + color: $color-01; fill: $color-01; p { background: $gradient-koios; @@ -188,8 +181,8 @@ &__icon { min-width: 20px; width: 20px; + height: 20px; margin-right: 20px; - fill: $gradient-koios; } } diff --git a/src/assets/css/modals/_modal-wallet-setup.scss b/src/assets/css/modals/_modal-wallet-setup.scss new file mode 100644 index 0000000..7d5657b --- /dev/null +++ b/src/assets/css/modals/_modal-wallet-setup.scss @@ -0,0 +1,28 @@ +.modal-wallet-setup { + width: 100vw; + max-width: 100%; + height: 100vh; + max-height: 100%; + background-color: #fff; + border-radius: 0; + padding: 30px 15px 10px; + + @include for-size (650px) { + width: 600px; + height: 420px; + border-radius: 20px; + } + + &__title { + font-family: $font-family-headings; + margin-bottom: 15px; + } + + iframe { + border-radius: 12px; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 315px; + } +} diff --git a/src/assets/css/modals/_modal.scss b/src/assets/css/modals/_modal.scss new file mode 100644 index 0000000..b957028 --- /dev/null +++ b/src/assets/css/modals/_modal.scss @@ -0,0 +1,59 @@ +.modal { + &__background { + position: fixed; + background-color: rgba(0, 0, 0, 0.75); + width: 100vw; + height: 100vh; + top: 0; + left: 0; + z-index: 5; + animation: fadeIn 0.2s ease forwards; + display: flex; + justify-content: center; + align-items: center; + } + + &__container { + z-index: 6; + position: relative; + margin: 0 auto; + overflow: auto; + width: fit-content; + max-width: 100%; + height: fit-content; + max-height: 100%; + } + + &__close { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + right: 0; + cursor: pointer; + margin-top: 10px; + margin-right: 10px; + background-color: rgba(0, 0, 0, 0.2); + color: #fff; + border-radius: 50%; + padding: 5px; + width: 25px; + height: 25px; + -webkit-transition: 0.2s ease-in-out; + -moz-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; + + &:hover { + transform-origin: center center; + -webkit-transform-origin: center center; /* Chrome, Safari */ + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + color: $color-10; + background-color: rgba(0, 0, 0, 0.1); + } + + &:active { + background-color: unset; + } + } +} diff --git a/src/assets/css/pages/_404.scss b/src/assets/css/pages/_404.scss index 91f9fd3..c69a6b1 100644 --- a/src/assets/css/pages/_404.scss +++ b/src/assets/css/pages/_404.scss @@ -7,15 +7,22 @@ display: flex; flex-direction: column; justify-content: center; + &__img { width: 60%; margin: 0 auto 1em; } + &__title { font-family: Righteous, sans-serif; font-size: 2em; color: $color-text; text-align: center; - margin-bottom: 2em; + margin-bottom: 1em; + } + + .btn { + display: block; + margin: 0 auto; } } \ No newline at end of file diff --git a/src/assets/css/pages/_Profile.scss b/src/assets/css/pages/_Profile.scss deleted file mode 100644 index a811c52..0000000 --- a/src/assets/css/pages/_Profile.scss +++ /dev/null @@ -1,286 +0,0 @@ -.profile { - margin: 10vh auto 0; - @include for-size($desktop) { - margin: 5vh auto 0; - } - - .actionContainer { - display: flex; - justify-content: flex-end; - max-width: 750px; - margin: 0 auto; - &__actions { - display: flex; - flex-direction: column; - &__item { - display: flex; - flex-direction: row; - justify-content: flex-end; - text-decoration: none; - color: $color-text; - margin-bottom: 1em; - font-family: $font-family-base; - p { - cursor: pointer; - transition: all 0.2s ease; - } - svg { - transition: all 0.2s ease; - } - &:hover { - p { - opacity: 0.5; - } - p + svg { - opacity: 0.5; - } - } - } - } - } - - &__img { - display: block; - width: 12em; - height: 12em; - border-radius: 50%; - margin: 0 auto 2em; - filter: grayscale(100); - opacity: 0.25; - - &--active { - opacity: unset; - filter: grayscale(0); - } - } - - &__name { - text-align: center; - font-weight: 600; - font-size: 2.25em; - color: $color-text; - margin: 0 15px; - } - - &__description { - text-align: center; - font-weight: 600; - font-size: 1.125em; - color: #d7d7d7; - max-width: 20em; - margin: 0.4em auto 0; - } - - &__network { - display: flex; - justify-content: center; - margin: 0 15px; - } - - &__address { - font-size: 1.125em; - font-weight: bold; - color: #d7d7d7; - } - - &__sign-out { - width: 23px; - height: 23px; - margin-left: 1rem; - color: #424242; - - &:hover { - color: #000; - cursor: pointer; - transition: all 0.2s ease; - } - } - - .wallet-connection { - display: flex; - flex-direction: row; - justify-content: space-between; - width: 20em; - margin: 2em auto; - - &__setup-button { - padding: 0.35em 2.5em; - border-radius: $radius; - box-shadow: $button-shadow; - //background: $gradient-koios; - //background-clip: unset; - //-webkit-background-clip: text; - //-webkit-text-fill-color: transparent; - font-family: "Source Sans Pro", sans-serif; - font-weight: 600; - transition: all 0.2s ease; - cursor: pointer; - &:hover { - box-shadow: $button-shadow-hover; - } - &:active { - background-color: $button-active-color; - } - p { - font-size: 16px; - font-weight: 600; - background: $gradient-koios; - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - } - - &__connect-button { - border: none; - padding: 5px 20px; - border-radius: $radius; - font-family: inherit; - color: #fff; - font-weight: bold; - font-size: 16px; - background-image: linear-gradient(to right, #ff0bac, #2f12dc); - background-size: 100%; - background-position: 25% 50%; - box-shadow: $button-shadow; - cursor: pointer; - transition: all 0.2s ease; - &:hover { - box-shadow: $button-shadow-hover; - background-size: 200%; - background-position: 0 50%; - } - } - } - - .collectibles { - max-width: 800px; - margin: 50px auto 0; - padding: 0 15px; - display: flex; - flex-wrap: wrap; - - .achievements { - text-align: center; - width: 100%; - @include for-size ($desktop) { - width: unset - } - &__header { - margin-bottom: 15px; - } - &__list { - display: flex; - - &--empty { - color: #d7d7d7; - font-weight: bold; - max-width: 200px; - } - } - - &__list-item { - margin: 0 10px; - } - - &__img { - width: 55px; - height: 55px; - } - - &__title { - max-width: 55px; - text-align: center; - font-size: 0.8em; - } - } - - .fungible-tokens { - text-align: center; - width: 100%; - @include for-size ($desktop) { - margin-left: auto; - margin-right: 50px; - width: unset; - } - &__header { - margin-bottom: 15px; - } - &__list { - display: flex; - - &--empty { - color: #d7d7d7; - font-weight: bold; - max-width: 200px; - } - } - - &__list-item { - margin: 0 10px; - } - - &__img { - width: 55px; - height: 55px; - } - - &__title { - max-width: 55px; - text-align: center; - font-size: 0.8em; - } - - &__balance { - max-width: 55px; - text-align: center; - font-size: 0.8em; - } - } - } - - .links { - max-width: 800px; - display: flex; - flex-wrap: wrap; - justify-content: center; - width: 100%; - margin: 5vh auto; - padding: 0 15px; - - @include for-size(1096px) { - justify-content: space-between; - } - - @include for-size($desktop) { - margin: 15vh auto; - } - - &__item { - font-family: $font-family-headings; - font-size: 1.5em; - text-align: center; - box-shadow: $button-shadow; - padding: 1em; - min-width: 10em; - text-decoration: none; - color: $color-text; - border-radius: $radius; - transition: all 0.2s ease; - border: 2px solid transparent; - margin: 0.3em; - p { - background: $gradient-koios; - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - &:hover { - box-shadow: $button-shadow-hover; - } - &:active { - background-color: $button-active-color; - } - } - } -} diff --git a/src/assets/css/pages/_WorldDetail.scss b/src/assets/css/pages/_WorldDetail.scss index 9fc7553..2f437b0 100644 --- a/src/assets/css/pages/_WorldDetail.scss +++ b/src/assets/css/pages/_WorldDetail.scss @@ -67,7 +67,7 @@ } h2 { color: white; - font-family: "Source Sans Pro", sans-serif; + font-family: 'Source Sans Pro', sans-serif; font-weight: 600; font-size: 1.125em; margin: 0.5em 0; @@ -233,6 +233,7 @@ text-decoration: none; color: #262626; border-radius: 10px; + background-color: #fff; &:hover { color: $color-koios-blue; diff --git a/src/assets/css/pages/_Worlds.scss b/src/assets/css/pages/_Worlds.scss deleted file mode 100644 index 23d6974..0000000 --- a/src/assets/css/pages/_Worlds.scss +++ /dev/null @@ -1,24 +0,0 @@ -.worlds { - h1 { - display: flex; - justify-content: center; - font-family: Righteous, sans-serif; - font-size: 2.5em; - line-height: 59.6px; - margin: 1em 0 0; - color: $color-text; - text-align: center; - @include for-size($desktop) { - font-size: 3em; - } - } - &__subtitle { - font-family: "Source Sans Pro", sans-serif; - font-weight: 600; - font-size: 1.4em; - text-align: center; - max-width: 25em; - margin: 1.5em auto 0; - color: $color-text; - } -} \ No newline at end of file diff --git a/src/assets/css/pages/_authenticated.scss b/src/assets/css/pages/_authenticated.scss new file mode 100644 index 0000000..50be4cf --- /dev/null +++ b/src/assets/css/pages/_authenticated.scss @@ -0,0 +1,125 @@ +.authenticated { + max-width: 1080px; + padding-top: 20px; + + .username { + margin-top: 20px; + text-align: center; + font-family: $font-family-headings; + font-size: 24px; + } + + .profile-info { + margin-top: 15px; + border-top: 1px solid $color-08; + + &__list-item { + display: flex; + align-items: center; + margin: 15px 10px 0; + color: $color-11; + font-weight: bold; + } + + &__icon, + &__img { + width: 20px; + margin-right: 10px; + fill: $color-10; + } + + .icon--discord { + margin-bottom: -1px; + } + + &__label { + color: $color-10; + margin-right: 10px; + font-weight: normal; + } + } + + .metablocks { + display: flex; + justify-content: space-evenly; + + @include for-size($desktop) { + width: fit-content; + margin-left: auto; + justify-content: unset; + } + + .metablock { + width: 50%; + text-align: center; + + @include for-size(400px) { + width: 50%; + } + + @include for-size($desktop) { + width: unset; + text-align: left; + } + } + } + + .tabs { + margin-top: 90px; + + &-options { + display: flex; + flex-direction: column; + margin-bottom: 20px; + padding-bottom: 10px; + border-bottom: 1px solid #b8add2; + color: #b8add2; + position: relative; + + @include for-size(600px) { + flex-direction: row; + padding-bottom: 0; + } + } + + &-title { + margin: 0 20px; + font-weight: 600; + cursor: pointer; + padding: 10px 5px; + position: relative; + transition: transform 0.25s; + + &::after { + content: ''; + top: 10%; + left: -20px; + position: absolute; + background: $color-05; + width: 4px; + height: 80%; + border-radius: 0 2px 2px 0; + transition: transform 0.5s; + transform: scale(0); + transform-origin: center; + + @include for-size(600px) { + top: unset; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 4px; + border-radius: 2px 2px 0 0; + } + } + &--active { + color: $color-06; + + &::after { + transform: scale(1); + } + } + } + } +} diff --git a/src/assets/css/pages/_coming-soon.scss b/src/assets/css/pages/_coming-soon.scss index b11a9ab..6630c5a 100644 --- a/src/assets/css/pages/_coming-soon.scss +++ b/src/assets/css/pages/_coming-soon.scss @@ -18,7 +18,7 @@ margin-bottom: 5px; } - .button-container { - margin-top: 20px; + .btn { + margin-top: 15px; } } \ No newline at end of file diff --git a/src/assets/css/pages/_leaderboard.scss b/src/assets/css/pages/_leaderboard.scss index 70c660d..ede708e 100644 --- a/src/assets/css/pages/_leaderboard.scss +++ b/src/assets/css/pages/_leaderboard.scss @@ -100,10 +100,6 @@ height: 50px; border-radius: 50%; object-fit: cover; - - &--not-available { - opacity: 0.2; - } } &__username { diff --git a/src/assets/css/pages/_unauthenticated.scss b/src/assets/css/pages/_unauthenticated.scss new file mode 100644 index 0000000..59d7f45 --- /dev/null +++ b/src/assets/css/pages/_unauthenticated.scss @@ -0,0 +1,57 @@ +.unauthenticated { + height: 100vh; + padding-top: 20px; + display: flex; + flex-direction: column; + + &__content-wrapper { + text-align: center; + margin: auto + } + + &__title { + @include gradient-text; + font-family: $font-family-headings; + } + + &__description { + max-width: 490px; + line-height: 23px; + font-weight: bold; + color: $color-10; + margin: 6px auto 0; + } + + &__c2a { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + margin-top: 25px; + flex-direction: column; + + @include for-size(360px) { + flex-direction: row; + } + + .btn { + margin: 5px 15px; + } + } + + &__error-msg { + color: $color-red; + font-size: 14px; + max-width: 400px; + margin: 25px auto 0; + font-style: italic; + + a { + color: inherit; + + &:hover { + color: lighten($color-red, 20); + } + } + } +} \ No newline at end of file diff --git a/src/assets/css/pages/_WorldOverview.scss b/src/assets/css/pages/_world-overview.scss similarity index 82% rename from src/assets/css/pages/_WorldOverview.scss rename to src/assets/css/pages/_world-overview.scss index d5b680d..06ea33a 100644 --- a/src/assets/css/pages/_WorldOverview.scss +++ b/src/assets/css/pages/_world-overview.scss @@ -1,10 +1,10 @@ -.worldOverviewHeader { +.world-overview-header { background-image: linear-gradient(to right, rgba(255, 11, 172, 0.5), rgba(47, 18, 220, 0.5)), url(https://images.unsplash.com/photo-1534996858221-380b92700493?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1931&q=80); background-size: 100% 300px; background-repeat: no-repeat; position: relative; - &__titleRow { + &__title-row { display: flex; flex-flow: column; padding: $spacing-4x $spacing-2x; @@ -27,6 +27,7 @@ font-size: 48px; } } + &__description { font-family: "Source Sans Pro", sans-serif; color: white; @@ -39,10 +40,11 @@ } } -.worldOverviewContainer { +.world-overview-container { display: flex; flex-direction: column; margin: 0 auto 150px; + padding-bottom: 50px; @include for-size($tablet) { margin: 0 auto; @@ -51,24 +53,9 @@ @include for-size($desktop) { margin: 0 auto 0; max-width: 1080px; - padding: 0 $spacing-10x 250px; - } - &__titleRow { - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - &__title { - font-family: Righteous, sans-serif; - font-size: 3em; - color: $color-text; - margin-bottom: 1rem; - padding: 0 1rem; - } - &__button { - padding-left: 1rem; - } + padding: 0 $spacing-10x 50px; } + &__description { font-family: "Source Sans Pro", sans-serif; line-height: 20.11px; diff --git a/src/assets/css/pages/_worlds.scss b/src/assets/css/pages/_worlds.scss new file mode 100644 index 0000000..6e654e3 --- /dev/null +++ b/src/assets/css/pages/_worlds.scss @@ -0,0 +1,46 @@ +.worlds { + &__title { + display: flex; + justify-content: center; + font-family: Righteous, sans-serif; + font-size: 2.5em; + line-height: 59.6px; + margin: 1em 0 0; + color: $color-text; + text-align: center; + + @include for-size($desktop) { + font-size: 3em; + } + } + + &__subtitle { + font-family: 'Source Sans Pro', sans-serif; + font-weight: 600; + font-size: 1.4em; + text-align: center; + max-width: 25em; + margin: 1.5em auto 15px; + color: $color-text; + } + + .card-container { + display: grid; + grid-gap: 2em; + grid-template-columns: repeat(auto-fill, 19em); + flex-direction: row; + justify-content: space-evenly; + flex-wrap: wrap; + margin: 6em auto 0; + max-width: 1080px; + + @include for-size($mobile, $desktop) { + padding: 0 2rem; + } + } +} + +.btn { + display: block; + margin: 0 auto; +} diff --git a/src/assets/css/utils/_mixins.scss b/src/assets/css/utils/_mixins.scss index 65849a5..6b8d3b0 100644 --- a/src/assets/css/utils/_mixins.scss +++ b/src/assets/css/utils/_mixins.scss @@ -1,11 +1,20 @@ @mixin for-size($size, $max-size: null) { - @if ($max-size) { - @media only screen and (min-width: $size) and (max-width: $max-size) { - @content; - } - } @else { - @media only screen and (min-width: $size) { - @content; - } + @if ($max-size) { + @media only screen and (min-width: $size) and (max-width: $max-size) { + @content; } -} \ No newline at end of file + } @else { + @media only screen and (min-width: $size) { + @content; + } + } +} + +@mixin gradient-text() { + color: $color-01; + background: -webkit-linear-gradient(45deg, $color-01, $color-02); + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + display: inline-block; + background-size: 100%; +} diff --git a/src/assets/css/utils/_variables.scss b/src/assets/css/utils/_variables.scss index c6a0e07..e0bab56 100644 --- a/src/assets/css/utils/_variables.scss +++ b/src/assets/css/utils/_variables.scss @@ -11,6 +11,11 @@ $color-09: #d7d7d7; $color-10: #bdbdbd; $color-11: #424242; $color-12: #262626; +$color-13: #f0f5f9; +$color-14: #657795; + +// +$color-red: red; /* Old color support */ $color-koios-pink: $color-01; @@ -19,7 +24,7 @@ $color-koios-dark-grey: $color-11; $color-text: $color-12; /* Gradients */ -$gradient-koios: linear-gradient(to right, $color-koios-pink, $color-koios-blue); +$gradient-koios: linear-gradient(to right, $color-koios-pink 0%, $color-koios-blue 100%); $gradient-koios-transparent: linear-gradient(to right, rgba(255, 11, 172, 0.5), rgba(47, 18, 220, 0.5)); $gradient-koios-transparent-02: linear-gradient(to right, rgba(255, 11, 172, 0.3), rgba(47, 18, 220, 0.3)); $gradient-koios-transparent-03: linear-gradient(to right, rgba(255, 11, 172, 0.05), rgba(47, 18, 220, 0.05)); diff --git a/src/assets/data/Worlds.json b/src/assets/data/Worlds.json index 163a697..ce0e79f 100644 --- a/src/assets/data/Worlds.json +++ b/src/assets/data/Worlds.json @@ -1,6 +1,7 @@ [ { "course": "Blockchain Technology", + "logo": "/images/worlds/blockchain.svg", "url": "blockchain", "description": "This course encompasses Blockchain Technology. Whether you are an absolute beginner or a professional, this course has something for you. Further information on the level of each course can be found below. Select your course and get educated on this super exciting topic!", "quiz": "QmXsnYGKXxrAKiZKQ6AHtiwJq19xQoav9ea5Fs6tmB7xtU", @@ -99,7 +100,7 @@ }, { "name": "Jamie Jansen", - "imageUrl": "https://media-exp1.licdn.com/dms/image/C4D03AQFuxf2ASN9pyA/profile-displayphoto-shrink_200_200/0/1580551129552?e=1635379200&v=beta&t=bk-lrt4kbXck9N-zI1IwNM074aaVOCUWfCZKaVrX7S4", + "imageUrl": "https://cdn.discordapp.com/avatars/452760677418008617/e4e5eb6252c6d4a3af5d2cfed80941f1.webp?size=160", "description": "Gamified (digital) Education | DLT & DeFi Lecturer & Researcher", "twitterLink": "https://twitter.com/JamieJansen333", "twitterHandle": "@JamieJansen333", @@ -111,6 +112,7 @@ "imageUrl": "https://cdn.discordapp.com/avatars/801485039611150416/b091019dd6f35c6fe690480eb7992d53.png?size=256", "description": "Coordinator Koios minors", "linkedinLink": "https://linkedin.com/in/malva-ahmed", + "linkedinHandle": "Malva Ahmed", "twitterLink": "", "twitterHandle": "", "discordLink": "https://discord.com/users/801485039611150416", @@ -118,7 +120,7 @@ }, { "name": "Jordi Jansen", - "imageUrl": "https://www.bspd.nl/sites/default/files/Jordi%20Jansen.PNG", + "imageUrl": "https://cdn.discordapp.com/attachments/872750966926110720/942862309360037898/Garrison.jpg", "description": "Researcher combining Education, DeFi and Web3", "twitterLink": "https://www.twitter.com/jordijansen101", "twitterHandle": "@jordijansen101", @@ -131,6 +133,7 @@ }, { "course": "Trading Digital & Financial Assets", + "logo": "/images/worlds/trading.svg", "url": "tdfa01", "description": "Learn everything about investing and trading in traditional and digital asset (crypto) markets. Everything from Fundamental to technical analysis to risk management and trading/investing psychology. From Amazon to Gold and from Bitcoin to Decentralized Finance (DeFi)", "quickLinks": [ @@ -213,6 +216,7 @@ "imageUrl": "https://cdn.discordapp.com/avatars/801485039611150416/b091019dd6f35c6fe690480eb7992d53.png?size=256", "description": "Coordinator minor", "linkedinLink": "https://linkedin.com/in/malva-ahmed", + "linkedinHandle": "Malva Ahmed", "twitterLink": "", "twitterHandle": "", "discordLink": "https://discord.com/users/801485039611150416", @@ -220,7 +224,7 @@ }, { "name": "Ricardo Eradus", - "imageUrl": "https://media-exp1.licdn.com/dms/image/C5603AQG-ZrRkvfq5Pg/profile-displayphoto-shrink_200_200/0/1599399278857?e=1635379200&v=beta&t=QPxadx36MObXXc91ZAY2SgS3UduweB0Y70kDFb6kQm8", + "imageUrl": "https://cdn.discordapp.com/avatars/353455876247650305/d88091629b4e3d9a79ef9289d8cf84c5.webp?size=160", "description": "Co-initiator Koios & lecturer TDFA/FIT", "twitterLink": "https://twitter.com/tdfatweets", "twitterHandle": "@tdfatweets", @@ -229,7 +233,7 @@ }, { "name": "Jordi Jansen", - "imageUrl": "https://www.bspd.nl/sites/default/files/Jordi%20Jansen.PNG", + "imageUrl": "https://cdn.discordapp.com/attachments/872750966926110720/942862309360037898/Garrison.jpg", "description": "Researcher combining Education, DeFi and Web3", "twitterLink": "https://www.twitter.com/jordijansen101", "twitterHandle": "@jordijansen101", @@ -242,6 +246,7 @@ }, { "course": "Data Science for Business Improvement", + "logo": "/images/worlds/python.svg", "url": "datascience01", "description": "In the minor, students experience the full cycle of a data project: identification of the information need, finding available data sources and improving the quality of that data. Next phase: tools like Python and statistical models help to do advanced analysis (applying Machine Learning algorithms) on the data and create visual reports with data driven recommendations. Legal and ethical aspects of data projects are also covered in the program.", "quickLinks": [ @@ -297,6 +302,7 @@ }, { "course": "Programming Dapps", + "logo": "/images/worlds/dapps.svg", "url": "programmingdapps01", "description": "The course “Programming Dapps” teaches students to program distributed applications (DAPPS) for the public Ethereum blockchain.", "content": [ diff --git a/src/assets/data/courseinfo.json b/src/assets/data/courseinfo.json index c2b0876..251ca75 100644 --- a/src/assets/data/courseinfo.json +++ b/src/assets/data/courseinfo.json @@ -12,10 +12,10 @@ "description": "A quick introduction about the Koios platform itself and how you can use it to learn, earn and/or connect with a community to take on open source projects.", "goal": "", "start": "now", - "image": "/images/world_introduction.svg", + "image": "/images/worlds/world_introduction.svg", "community": "", "communityinvite": "", - "link": "/explanation" + "link": "#/explanation" }, "blockchain": { "course": "Blockchain Technology", @@ -30,10 +30,10 @@ "description": "This course encompasses Blockchain Technology. Whether you are an absolute beginner or a professional, this course has something for you. Further information on the level of each course can be found below. Select your course and get educated on this super exciting topic!", "goal": "Solidity IPFS", "start": "now", - "image": "/images/blockchain.svg", + "image": "/images/worlds/blockchain.svg", "community": "https://discord.com/invite/SBpZhEDHFR", "communityinvite": "https://discord.com/invite/SBpZhEDHFR", - "link": "/worlds/blockchain" + "link": "#/worlds/blockchain" }, "tdfa01": { "course": "Trading Digital & Financial Assets", @@ -44,11 +44,11 @@ "duration": "16707", "slides": "QmRGWvHn3wksXEf2s8Cod3Kw9TWzDXb84MWAZEADPKwz3A", "quizinfo": "QmXsnYGKXxrAKiZKQ6AHtiwJq19xQoav9ea5Fs6tmB7xtU", - "image": "/images/trading.svg", + "image": "/images/worlds/trading.svg", "community": "https://discord.com/invite/SBpZhEDHFR", "communityinvite": "https://discord.com/invite/SBpZhEDHFR", "description": "Learn everything about investing and trading in traditional and digital asset (crypto) markets. Everything from Fundamental to technical analysis to risk management and trading/investing psychology. From Amazon to Gold and from Bitcoin to Decentralized Finance (DeFi)", - "link": "/worlds/tdfa01" + "link": "#/worlds/tdfa01" }, "bclevel01": { "course": "Mastering Blockchain", @@ -105,6 +105,7 @@ }, "datascience01": { "course": "Datascience & Python", + "external": true, "courselevel": "Introduction to Python", "level": "intermediate", "contributer": "Leon", @@ -112,13 +113,13 @@ "description": "In the minor, students experience the full cycle of a data project: identification of the information need, finding available data sources and improving the quality of that data. Next phase: tools like Python and statistical models help to do advanced analysis (applying Machine Learning algorithms) on the data and create visual reports with data driven recommendations. Legal and ethical aspects of data projects are also covered in the program.", "goal": "TBA", "start": "Soon", - "image": "/images/python.svg", + "image": "/images/worlds/python.svg", "videoinfo": "QmQoQk5zLkWjhTW8kAQRkgx65i5he1cq4oESEd6XyGmaR3", "duration": "10464", "slides": "QmZDDygn5qGus5wGfu7oskjVQP4JLrAL4sMbeg1HijmUQu", "community":"https://discord.com/invite/SBpZhEDHFR", "communityinvite":"https://discord.com/invite/SBpZhEDHFR", - "link": "/worlds/datascience01" + "link": "https://moodle.koios.world/" }, "security01": { "course": "Security Essentials", @@ -151,10 +152,10 @@ "fullDescription": "The course “Programming Dapps” teaches students to program distributed applications (DAPPS) for the public Ethereum blockchain. After explaining the architecture of blockchain applications, the programming language “Solidity” is explained. With this student practice to create a smart contract, with several dedicated tools. They also learn how to access the smart contracts from JavaScript programs and websites; both from pc’s and from mobile phones. The installation and management of blockchain software is also part of the course. Additionally programming patterns, security, key management and best practices are learned. This also includes creating unit tests for smart contracts. Building blocks like tokens, the Ethereum name services, IPFS (distributed storage), multisig wallets are also an essential element of the course. It is important to be able to program (in any programming language). JavaScript experience is a big help. Also you need a (fairly capable) laptop on which all the tools are installed. After every theory lesson the student have to make practical assignment to get experience with the Ethereum blockchain and tools.", "goal": "Solidity IPFS", "start": "now", - "image": "/images/Dapps.svg", + "image": "/images/worlds/dapps.svg", "community": "https://discord.com/invite/SBpZhEDHFR", "communityinvite": "https://discord.com/invite/SBpZhEDHFR", - "link": "/worlds/programmingdapps01" + "link": "#/worlds/programmingdapps01" }, "testing01": { "course": "Testing the viewer", diff --git a/src/assets/images/Peepos/Feelsbadman.png b/src/assets/images/Peepos/Feelsbadman.png deleted file mode 100644 index 2eda18d..0000000 Binary files a/src/assets/images/Peepos/Feelsbadman.png and /dev/null differ diff --git a/src/assets/images/birds/parrot--glasses.png b/src/assets/images/birds/parrot--glasses.png deleted file mode 100644 index ed782ba..0000000 Binary files a/src/assets/images/birds/parrot--glasses.png and /dev/null differ diff --git a/src/assets/images/birds/parrot--rocket.png b/src/assets/images/birds/parrot--rocket.png deleted file mode 100644 index 732e538..0000000 Binary files a/src/assets/images/birds/parrot--rocket.png and /dev/null differ diff --git a/src/assets/images/brands/discord--3d.png b/src/assets/images/brands/discord--3d.png new file mode 100644 index 0000000..3ba078e Binary files /dev/null and b/src/assets/images/brands/discord--3d.png differ diff --git a/src/assets/images/placeholders/avatar-placeholder.png b/src/assets/images/placeholders/avatar-placeholder.png new file mode 100644 index 0000000..f7fee51 Binary files /dev/null and b/src/assets/images/placeholders/avatar-placeholder.png differ diff --git a/src/assets/images/placeholders/banner-placeholder.png b/src/assets/images/placeholders/banner-placeholder.png new file mode 100644 index 0000000..1df3f96 Binary files /dev/null and b/src/assets/images/placeholders/banner-placeholder.png differ diff --git a/src/assets/images/placeholders/titan-token-placeholder.png b/src/assets/images/placeholders/titan-token-placeholder.png new file mode 100644 index 0000000..43f2562 Binary files /dev/null and b/src/assets/images/placeholders/titan-token-placeholder.png differ diff --git a/src/assets/images/worlds/world_introduction.svg b/src/assets/images/worlds/world_introduction.svg deleted file mode 100644 index d8d5ec2..0000000 --- a/src/assets/images/worlds/world_introduction.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Button.tsx b/src/components/Button.tsx deleted file mode 100644 index c943fb3..0000000 --- a/src/components/Button.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Link } from "react-router-dom"; - -const Button = (props: { title: string; link: string }) => { - return ( -
- -

{props.title}

- -
- ); -}; - -export default Button; diff --git a/src/components/Card.tsx b/src/components/Card.tsx deleted file mode 100644 index 9e238cd..0000000 --- a/src/components/Card.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Link } from "react-router-dom"; -import { Icon } from "./Util/Icon"; - -const Card = (props: { - image: string; - title: string; - description: string; - linkUrl: string; - linkTitle: string; - duration: string; -}) => { - return ( - - {"artwork"} -
-

{props.title}

-
-

- - {Math.floor(parseInt(props.duration) / 60)} Min -

-
-
-

{props.description}

- {/*

{props.linkTitle}

*/} - - ); -}; - -export default Card; diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx new file mode 100644 index 0000000..a035977 --- /dev/null +++ b/src/components/CourseCard.tsx @@ -0,0 +1,39 @@ +import { Icon } from './Util/Icon'; + +type CardProps = { + image: string; + title: string; + description: string; + linkUrl: string; + linkTitle: string; + duration: string; + external?: boolean; +} + +const CourseCard = (props: CardProps) => { + const duration = Math.floor(parseInt(props.duration) / 60); + + return ( + + {'artwork'} +
+

{props.title}

+ +
    +
  • {duration} min
    • + + {props.external && +
  • External course
    • + } +
+
+

{props.description}

+ + ); +}; + +export default CourseCard; diff --git a/src/components/Layout/MainNav/MainNav.tsx b/src/components/Layout/MainNav/MainNav.tsx index 0fb24bd..a93ebca 100644 --- a/src/components/Layout/MainNav/MainNav.tsx +++ b/src/components/Layout/MainNav/MainNav.tsx @@ -1,51 +1,43 @@ -import { useContext, useEffect, useState } from "react"; -import { Link, NavLink } from "react-router-dom"; -import { Icon } from "../../Util/Icon"; -import { useSizes } from "../../Util/useSizes"; -import koiosLogo from "../../../assets/images/logos/koios-logo.svg"; -import { selectedAccount, profilePicture, profileName } from "../../Web3/Web3"; -import MainNavData from "./static/MainNavData.json"; -import { SvgSprite } from "../../Util/SvgSprite"; -import { Connect, Disconnect } from "../../Web3/ConnectionCheck"; -import { web3Modal } from "../../Web3/WalletProvider"; -import { UserContext } from "../../../Context/UserContext"; -import { FormatPublicKey } from "../../Util/FormatPublicKey"; +import { useContext, useEffect, useState } from 'react'; +import { Link, NavLink } from 'react-router-dom'; +import { Icon } from '../../Util/Icon'; +import { useSizes } from '../../Util/useSizes'; +import koiosLogo from '../../../assets/images/logos/koios-logo.svg'; +import MainNavData from './static/MainNavData.json'; +import { SvgSprite } from '../../Util/SvgSprite'; +import { web3Modal } from '../../Web3/WalletProvider'; +import { UserContext } from '../../../Context/UserContext'; +import { useWeb3 } from '../../../components/Web3/useWeb3'; +import avatarPlaceholder from '../../../assets/images/placeholders/avatar-placeholder.png'; +import { AuthContext } from '../../../Context/AuthContext'; +import { noop } from '../../Util/noop'; export const MainNav = () => { - const { user, setUser } = useContext(UserContext); - + const { userAccount } = useContext(UserContext); + const { connectWallet, disconnectWallet } = useWeb3(); const { width } = useSizes(); - const isMobile = width < 769; + const [isMenuOpen, setIsMenuOpen] = useState(false); + const [disconnectButtonText, setDisconnectButtonText] = useState('loading'); + const { isAuthenticating, authError } = useContext(AuthContext); + + const isMobile = width < 1200; - const [isMenuOpen, setIsMenuOpen] = useState(false); const toggleMenu = () => { if (isMobile) { setIsMenuOpen(!isMenuOpen); } }; - isMenuOpen ? (document.body.className = "menu-is-open") : (document.body.className = ""); - - const initialDisconnectText = selectedAccount ? FormatPublicKey(selectedAccount) : selectedAccount; - const [disconnectButtonText, setDisconnectButtonText] = useState("loading"); - - const connectProvider = async () => { - const checkProvider = await Connect(); - setUser(checkProvider); - }; - const disconnectProvider = async () => { - const checkProvider = await Disconnect(); - setUser(checkProvider); - }; + const initialDisconnectText = userAccount ? userAccount.publicKeyFormatted : 'selectedAccount'; useEffect(() => { if (web3Modal.cachedProvider) { - connectProvider(); + connectWallet(); } else { - disconnectProvider(); + disconnectWallet(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [user]); + }, []); useEffect(() => { setDisconnectButtonText(initialDisconnectText); @@ -53,14 +45,14 @@ export const MainNav = () => { return ( <> -
+
{isMobile && (
Koios logo @@ -68,26 +60,30 @@ export const MainNav = () => {
)} -