diff --git a/src/components/Anchor.tsx b/src/components/Anchor.tsx new file mode 100644 index 0000000..e9ef6b4 --- /dev/null +++ b/src/components/Anchor.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import { HashLink } from "react-router-hash-link"; + +interface AnchorProps extends React.HTMLAttributes { + to: string; +} + +const Anchor: React.FC = ({ to, ...props }) => { + if (to.startsWith("/")) { + return ( + + ); + } else if (to.startsWith("#")) { + return ( + + ); + } + else { + return ( + + ); + } +} +export default Anchor; diff --git a/src/components/Anchor/Anchor.tsx b/src/components/Anchor/Anchor.tsx deleted file mode 100644 index 8e86b53..0000000 --- a/src/components/Anchor/Anchor.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import { HashLink } from "react-router-hash-link"; - -export interface AnchorProps extends React.HTMLAttributes { - to: string; -} - -class Anchor extends React.Component { - render() { - const { children, to, ...props } = this.props; - - if (to.startsWith("/")) { - return ( - {children} - ); - } else if (to.startsWith("#")) { - return ( - {children} - ); - } - else { - return ( - {children} - ); - } - } -} -export default Anchor; diff --git a/src/components/Anchor/index.ts b/src/components/Anchor/index.ts deleted file mode 100644 index dcc717e..0000000 --- a/src/components/Anchor/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import Anchor from "./Anchor"; -export default Anchor; diff --git a/src/components/AsideSection/AsideSection.scss b/src/components/AsideSection/AsideSection.scss deleted file mode 100644 index 80f731a..0000000 --- a/src/components/AsideSection/AsideSection.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "../../assets/scss/globals"; - - -.aside-section { - display: flex; - flex: 1; - flex-flow: column; - justify-content: space-between; - padding: 3rem 4rem; -} diff --git a/src/components/AsideSection/AsideSection.tsx b/src/components/AsideSection/AsideSection.tsx index 9dce772..035a961 100644 --- a/src/components/AsideSection/AsideSection.tsx +++ b/src/components/AsideSection/AsideSection.tsx @@ -1,25 +1,33 @@ import React from "react"; -import "./AsideSection.scss"; -import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv"; +import styled from "styled-components"; +import { ColorDivProps } from "../ColorDiv/ColorDiv"; +import { ColorMapper } from "@theme/colors"; -export interface AsideSectionProps { - className?: string; -} -export interface AsideSectionState { } +type AsideSectionProps = ColorDivProps; -class AsideSection extends React.Component { - render() { - const { children, className, ...props } = this.props; - const classNames = [ - "aside-section", - ]; - if (className) classNames.push(className); - return ( - - {children} - - ); +const Section = styled.div` + display: flex; + flex: 1; + flex-flow: column; + justify-content: space-between; + padding: 3rem 4rem; + + color: ${(p) => p.textColor}; + background-color: ${(p) => p.backgroundColor}; + &:hover { + color: ${(p) => p.hoverColor}; + background-color: ${(p) => p.hoverBackgroundColor}; } -} +`; + +const AsideSection: React.FC = ({ textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props }) => ( +
+); export default AsideSection; diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 451e962..d19589c 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; +import { colors } from "@theme/colors"; const Container = styled.label` display: block; @@ -31,7 +32,7 @@ const CustomCBoxElement = styled.span<{checked?: boolean}>` left: 0; height: 1em; width: 1em; - background-color: ${(props) => props.checked ? "#57b2df" : "#efece4"}; /* blue1 or grey2 */ + background-color: ${(props) => props.checked ? colors.blue1 : colors.grey2}; &:focus &:before { transition: box-shadow 150ms ease; @@ -43,7 +44,7 @@ const CustomCBoxElement = styled.span<{checked?: boolean}>` left: -4px; right: -4px; border-radius: 6px; - border: 2px solid color(blue); + border: 2px solid ${colors.blue1}; } `; diff --git a/src/components/ColorDiv/ColorDiv.scss b/src/components/ColorDiv/ColorDiv.scss deleted file mode 100644 index 4b4ee2d..0000000 --- a/src/components/ColorDiv/ColorDiv.scss +++ /dev/null @@ -1,66 +0,0 @@ -@import "../../assets/scss/globals"; - -.color-div { - @mixin hoverableColor($colorName) { - &__#{$colorName} { - color: color($colorName); - } - - &__#{$colorName}Hoverable { - &:hover, - &:active { - color: hover($colorName); - } - } - } - - @mixin backgroundColor($colorName) { - &__background_#{$colorName} { - background-color: color($colorName); - } - - &__background_#{$colorName}Hoverable { - &:hover, - &:active { - background-color: hover($colorName); - } - } - } - - @mixin backgroundAndHoverableColor($colorName) { - @include hoverableColor($colorName); - @include backgroundColor($colorName); - } - - @include backgroundAndHoverableColor(dark-blue); - @include backgroundAndHoverableColor(light-blue); - @include backgroundAndHoverableColor(white1); - @include backgroundAndHoverableColor(black1); - @include backgroundAndHoverableColor(grey1); - @include backgroundAndHoverableColor(grey2); - @include backgroundAndHoverableColor(orange1); - @include backgroundAndHoverableColor(orange2); - @include backgroundAndHoverableColor(blue1); - @include backgroundAndHoverableColor(light-turquoise); - @include backgroundAndHoverableColor(green1); - @include backgroundAndHoverableColor(sand); - - &__inherit { - color: inherit; - } - - &__transparent { - color: transparent; - } - - &__inheritHoverable { - &:hover, - &:active { - color: inherit; - } - } - - &__background_transparent { - background-color: transparent; - } -} \ No newline at end of file diff --git a/src/components/ColorDiv/ColorDiv.tsx b/src/components/ColorDiv/ColorDiv.tsx index 05a9b1c..754495b 100644 --- a/src/components/ColorDiv/ColorDiv.tsx +++ b/src/components/ColorDiv/ColorDiv.tsx @@ -1,34 +1,38 @@ import React from "react"; -import "./ColorDiv.scss"; -import { Colors, colorToClass, bgColorToClass, hoverColorToClass, bgHoverColorToClass } from "@theme/colors"; -import classNames from "classnames"; +import styled from "styled-components" +import { Colors, ColorMapper } from "@theme/colors"; -export interface ColorDivProps extends React.HTMLAttributes { +interface ColorsProps { + textColor?: string; + backgroundColor?: string; + hoverColor?: string; + hoverBackgroundColor?: string; +} + +export type ColorDivProps = React.HTMLAttributes & { textColor?: Colors; backgroundColor?: Colors; hoverColor?: Colors; backgroundHoverColor?: Colors; } -export interface ColorDivState { } - -class ColorDiv extends React.Component { - render() { - const { children, className, textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props } = this.props; - const classes = classNames( - className, - colorToClass(textColor), - bgColorToClass(backgroundColor), - hoverColorToClass(hoverColor), - bgHoverColorToClass(backgroundHoverColor) - ); - - return ( -
- {children} -
- ); +const Div = styled.div` + color: ${(p) => p.textColor}; + background-color: ${(p) => p.backgroundColor}; + &:hover { + color: ${(p) => p.hoverColor}; + background-color: ${(p) => p.hoverBackgroundColor}; } -} +`; + +const ColorDiv: React.FC = ({ textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props }) => ( +
+); export default ColorDiv; diff --git a/src/components/Hero/HeroAsideItem.tsx b/src/components/Hero/HeroAsideItem.tsx new file mode 100644 index 0000000..45189bb --- /dev/null +++ b/src/components/Hero/HeroAsideItem.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import styled from "styled-components"; +import Anchor from "../Anchor"; +import { colors } from "@theme/colors"; + +interface HeroAsideItemProps { + title: string; + linkText: string; + linkHref: string; +} + +const Section = styled.div` + max-width: 300px; + line-height: 16px; + margin-bottom: 1rem; + + @media screen and (max-width: 600px - 1px) { + p, + a { + font-size: 16px !important; + line-height: 20px; + } + } + + h2 { + text-transform: uppercase; + letter-spacing: 3px; + line-height: 20px; + } + + p { + font-size: 14px; + line-height: 20px; + } + + h6 { + color: ${colors.blue1}; + font-weight: 600; + } + + h6:hover { + color: ${colors.white}; + } +`; + +const HeroAsideItem: React.FC = ({ title, linkText, linkHref, children }) => ( +
+

{title}

+

{children}

+ +
{linkText} ›
+ +
+) + +export default HeroAsideItem; diff --git a/src/components/Hero/HeroAsideItem/HeroAsideItem.scss b/src/components/Hero/HeroAsideItem/HeroAsideItem.scss deleted file mode 100644 index 4b4b047..0000000 --- a/src/components/Hero/HeroAsideItem/HeroAsideItem.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import "../../../assets/scss/globals"; - - -.hero-aside-item { - max-width: 300px; - line-height: 16px; - margin-bottom: 1rem; - - @media screen and (max-width: 600px - 1px) { - p, - a { - font-size: 16px !important; - line-height: 20px; - } - } - - h2 { - text-transform: uppercase; - letter-spacing: 3px; - line-height: 20px; - } - - p { - font-size: 14px; - line-height: 20px; - } - - h6 { - color: color(blue1); - font-weight: 600; - } - - h6:hover { - color: color(white1); - } -} diff --git a/src/components/Hero/HeroAsideItem/HeroAsideItem.tsx b/src/components/Hero/HeroAsideItem/HeroAsideItem.tsx deleted file mode 100644 index a1143a9..0000000 --- a/src/components/Hero/HeroAsideItem/HeroAsideItem.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; -import "./HeroAsideItem.scss"; -import Anchor from "../../Anchor"; - -interface HeroAsideItemProps { - title: string; - linkText: string; - linkHref: string; -} - -const HeroAsideItem: React.FC = ({ title, linkText, linkHref, children }) => ( -
-

{title}

-

{children}

- -
{linkText} ›
- -
-) - -export default HeroAsideItem; diff --git a/src/components/Hero/HeroAsideSection.tsx b/src/components/Hero/HeroAsideSection.tsx new file mode 100644 index 0000000..1081bb6 --- /dev/null +++ b/src/components/Hero/HeroAsideSection.tsx @@ -0,0 +1,53 @@ +import React from "react"; +import styled from "styled-components"; +import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv"; +import { colors } from "@theme/colors"; + +const Section = styled(ColorDiv)` + display: flex; + flex-flow: column nowrap; + align-items: flex-start; + justify-content: center; + flex: 4; + + @media screen and (max-width: 800px - 1px) { + align-items: center; + } + + text-align: left; + padding: 3rem 1rem 2rem; + + &.dark-blue { + background-color: ${colors.darkBlue}; + + h2 { + color: ${colors.lightBlue}; + } + + p { + font-weight: 100; + color: ${colors.white}; + } + } + + &.light-turquoise { + background-color: ${colors.lightTurquoise}; + + h2, + p { + color: ${colors.darkBlue}; + } + } + + &.light-blue { + background-color: ${colors.lightBlue}; + } +`; + +const HeroAsideSection: React.FC = (props) => { + return ( +
+ ); +} + +export default HeroAsideSection; diff --git a/src/components/Hero/HeroAsideSection/HeroAsideSection.scss b/src/components/Hero/HeroAsideSection/HeroAsideSection.scss deleted file mode 100644 index c632179..0000000 --- a/src/components/Hero/HeroAsideSection/HeroAsideSection.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import "../../../assets/scss/globals"; - - -.hero-aside-section { - display: flex; - flex-flow: column nowrap; - align-items: flex-start; - justify-content: center; - flex: 4; - - @media screen and (max-width: 800px - 1px) { - align-items: center; - } - - text-align: left; - padding: 3rem 1rem 2rem; - - &.dark-blue { - background-color: color(dark-blue); - - h2 { - color: color(light-blue); - } - - p { - font-weight: 100; - color: color(white1); - } - } - - &.light-turquoise { - background-color: color(light-turquoise); - - h2, - p { - color: color(dark-blue); - } - } - - &.light-blue { - background-color: color(light-blue); - } -} diff --git a/src/components/Hero/HeroAsideSection/HeroAsideSection.tsx b/src/components/Hero/HeroAsideSection/HeroAsideSection.tsx deleted file mode 100644 index 505a0db..0000000 --- a/src/components/Hero/HeroAsideSection/HeroAsideSection.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; -import "./HeroAsideSection.scss"; -import ColorDiv, { ColorDivProps } from "../../ColorDiv/ColorDiv"; - - -export interface HeroAsideSectionProps { } -export interface HeroAsideSectionState { } - -class HeroAsideSection extends React.Component { - render() { - const className = "hero-aside-section"; - return ( - -
- {this.props.children} -
- - ); - } -} - -export default HeroAsideSection; diff --git a/src/components/Hero/HeroMainSection/HeroMainSection.tsx b/src/components/Hero/HeroMainSection.tsx similarity index 100% rename from src/components/Hero/HeroMainSection/HeroMainSection.tsx rename to src/components/Hero/HeroMainSection.tsx diff --git a/src/components/Hero/HeroSecondarySection/HeroSecondarySection.tsx b/src/components/Hero/HeroSecondarySection.tsx similarity index 96% rename from src/components/Hero/HeroSecondarySection/HeroSecondarySection.tsx rename to src/components/Hero/HeroSecondarySection.tsx index a7234ee..ca170c4 100644 --- a/src/components/Hero/HeroSecondarySection/HeroSecondarySection.tsx +++ b/src/components/Hero/HeroSecondarySection.tsx @@ -1,6 +1,6 @@ import React from "react"; import styled from "styled-components"; -import ColorDiv from "../../ColorDiv/ColorDiv"; +import ColorDiv from "../ColorDiv/ColorDiv"; interface HeroSecondarySectionItemProps { note?: string; diff --git a/src/components/MainSection.tsx b/src/components/MainSection.tsx new file mode 100644 index 0000000..729717a --- /dev/null +++ b/src/components/MainSection.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import styled from "styled-components"; +import ColorDiv, { ColorDivProps } from "./ColorDiv/ColorDiv"; +import { colors } from "@theme/colors"; + +const Section = styled(ColorDiv)` + display: flex; + flex: 2; + flex-flow: column; + padding: 0 3rem; + + & > h3 { + margin: auto; + } + + & > h6 { + color: ${colors.orange1}; + } + + & > p { + margin-block-start: 0.5rem; + margin-block-end: 1rem; + } +`; + +const MainSection: React.FC = (props) => ( +
+); + +export default MainSection; diff --git a/src/components/MainSection/MainSection.scss b/src/components/MainSection/MainSection.scss deleted file mode 100644 index ed09469..0000000 --- a/src/components/MainSection/MainSection.scss +++ /dev/null @@ -1,21 +0,0 @@ -@import "../../assets/scss/globals"; - -.main-section { - display: flex; - flex: 2; - flex-flow: column; - padding: 0 3rem; - - & > h3 { - margin: auto; - } - - & > h6 { - color: color(orange1); - } - - & > p { - margin-block-start: 0.5rem; - margin-block-end: 1rem; - } -} diff --git a/src/components/MainSection/MainSection.tsx b/src/components/MainSection/MainSection.tsx deleted file mode 100644 index a96a12a..0000000 --- a/src/components/MainSection/MainSection.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import "./MainSection.scss"; -import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv"; -import classNames from "classnames"; - -export interface MainSectionProps { } -export interface MainSectionState { } - -class MainSection extends React.Component { - render() { - const { children, className, ...props } = this.props; - const classes = classNames( - "main-section", - className - ); - - return ( - - {children} - - ); - } -} - -export default MainSection; diff --git a/src/components/MainSection/index.ts b/src/components/MainSection/index.ts deleted file mode 100644 index 50928f2..0000000 --- a/src/components/MainSection/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import MainSection from "./MainSection"; -export default MainSection; diff --git a/src/components/PageSection/PageSection.scss b/src/components/PageSection/PageSection.scss deleted file mode 100644 index 99752d3..0000000 --- a/src/components/PageSection/PageSection.scss +++ /dev/null @@ -1,40 +0,0 @@ -@import "../../assets/scss/globals"; - - -.page-section { - display: flex; - flex-flow: row wrap; - justify-content: space-between; - position: relative; - - &.lander-hero { - @media screen and (min-width: 800px) { - min-height: 85vh; - } - } - - &.padded { - padding: 2rem 1rem 2rem; - } - - &:not(.card-section) { - @media screen and (max-width: 800px - 1px) { - flex-flow: column nowrap; - } - } - - &.center { - justify-content: center; - } - - &.bottom-border { - &::after { - content: ""; - position: absolute; - bottom: 0; - width: 98%; - left: 1%; - border-bottom: 1px solid rgba(color(blue1), 0.4); - } - } -} diff --git a/src/components/PageSection/PageSection.tsx b/src/components/PageSection/PageSection.tsx index e6e7c0b..baa9b6c 100644 --- a/src/components/PageSection/PageSection.tsx +++ b/src/components/PageSection/PageSection.tsx @@ -1,36 +1,50 @@ import React from "react"; -import "./PageSection.scss"; +import styled from "styled-components"; import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv"; +import { colors } from "@theme/colors"; -export interface PageSectionProps { +interface PageSectionProps { center?: boolean; bottomBorder?: boolean; cardSection?: boolean; // does section contain a grid of cards fullSize?: boolean; } -export interface PageSectionState { } -class PageSection extends React.Component { - render() { - const { children, className, center, bottomBorder, cardSection, fullSize, ...props } = this.props; - const centerClass = center ? "center" : ""; - const borderClass = bottomBorder ? "bottom-border" : ""; - const cardsClass = cardSection ? "card-section" : ""; - const nonPaddedClass = fullSize ? "" : "padded"; - const classNames = [ - "page-section", - centerClass, - borderClass, - cardsClass, - nonPaddedClass - ]; - if (className) classNames.push(className); - return ( - - {children} - - ); +const Section = styled(ColorDiv)` + display: flex; + flex-flow: row wrap; + justify-content: ${(p) => p.center ? "center" : "space-between"}; + position: relative; + padding: ${(p) => p.fullSize ? 0 : "2rem 1rem 2rem"}; + + .lander-hero { + @media screen and (min-width: 800px) { + min-height: 85vh; + } } + + ${(p) => p.cardSection ? "" : ` + @media screen and (max-width: 800px - 1px) { + flex-flow: column nowrap; + } + `} + + ${(p) => p.bottomBorder ? ` + &::after { + content: ""; + position: absolute; + bottom: 0; + width: 98%; + left: 1%; + border-bottom: 1px solid rgba(${colors.blue1}, 0.4); + } + ` : ""} +`; + +const PageSection: React.FC = (props) => { + return ( +
+ ); } export default PageSection; diff --git a/src/components/Ribbon/Ribbon.scss b/src/components/Ribbon/Ribbon.scss deleted file mode 100644 index f85144f..0000000 --- a/src/components/Ribbon/Ribbon.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import "../../assets/scss/globals"; - - -.ribbon { - display: flex; - flex-flow: row nowrap; - align-items: flex-end; - text-align: center; - justify-content: center; - margin: auto; - - p { - font-size: 2rem; - font-weight: 100; - line-height: 30px; - margin-block-start: 0; - margin-block-end: 0; - } - - @media screen and (max-width: 600px - 1px) { - flex-flow: column nowrap; - align-items: center; - } -} diff --git a/src/components/Ribbon/Ribbon.tsx b/src/components/Ribbon/Ribbon.tsx index 240bb27..81f416b 100644 --- a/src/components/Ribbon/Ribbon.tsx +++ b/src/components/Ribbon/Ribbon.tsx @@ -1,17 +1,34 @@ -import React from "react"; -import "./Ribbon.scss"; +import styled from "styled-components"; -export interface RibbonProps {} -export interface RibbonState {} +const Ribbon = styled.div` + display: flex; + flex-flow: row nowrap; + align-items: flex-end; + text-align: center; + justify-content: center; + margin: auto; -class Ribbon extends React.Component { - render() { - return ( -
- {this.props.children} -
- ); + p { + font-size: 2rem; + font-weight: 100; + line-height: 30px; + margin-block-start: 0; + margin-block-end: 0; } -} + + a { + font-weight: 100; + text-decoration: none; + margin: 0 1rem; + font-size: 0.8rem; + text-transform: uppercase; + margin-top: 10px; + } + + @media screen and (max-width: 600px - 1px) { + flex-flow: column nowrap; + align-items: center; + } +`; export default Ribbon; diff --git a/src/components/TextAnchor.tsx b/src/components/TextAnchor.tsx new file mode 100644 index 0000000..99e608b --- /dev/null +++ b/src/components/TextAnchor.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import styled from "styled-components"; +import { Colors, colorToClass, hoverColorToClass } from "@theme/colors"; +import Anchor from "./Anchor"; +import classNames from "classnames"; + +const A = styled(Anchor)` + text-decoration: underline; + font-weight: 600; +`; + +interface TextAnchorProps { + to: string; + textColor?: Colors; + hoverColor?: Colors; +} + +const TextAnchor: React.FC = ({ children, to, textColor, hoverColor }) => { + const classes = classNames( + colorToClass(textColor), + hoverColorToClass(hoverColor), + ) + return ( + + {children} + + ); +} + +export default TextAnchor; diff --git a/src/components/TextAnchor/TextAnchor.scss b/src/components/TextAnchor/TextAnchor.scss deleted file mode 100644 index ad1d68d..0000000 --- a/src/components/TextAnchor/TextAnchor.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import "../../assets/scss/globals"; - -.text-anchor { - text-decoration: underline; - font-weight: 600; - - &__no-weight { - font-weight: 100; - } - - &__small { - text-decoration: none; - margin: 0 1rem; - font-size: 0.8rem; - text-transform: uppercase; - margin-top: 10px; - } -} diff --git a/src/components/TextAnchor/TextAnchor.tsx b/src/components/TextAnchor/TextAnchor.tsx deleted file mode 100644 index 193fab5..0000000 --- a/src/components/TextAnchor/TextAnchor.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from "react"; -import "./TextAnchor.scss"; -import { Colors, colorToClass, hoverColorToClass } from "@theme/colors"; -import Anchor from "../Anchor"; -import classNames from "classnames"; - - -export type TextSize = - "normal" | - "small" | - "large" | - "ribbon" | - "small-ribbon"; - - -const textSizeToClassName = new Map([ - ["normal", ""], - ["small", "text-anchor__small"], - ["large", "text-anchor__large"], - ["small-ribbon", "text-anchor__no-weight text-anchor__small"], - ["ribbon", "text-anchor__no-weight"], -]); - -export interface TextAnchorProps { - size?: TextSize; - to: string; - textColor?: Colors; - hoverColor?: Colors; -} -export interface TextAnchorState { } - -class TextAnchor extends React.Component { - render() { - const { children, size, to, textColor, hoverColor } = this.props; - const classes = classNames( - "text-anchor", - colorToClass(textColor), - hoverColorToClass(hoverColor), - textSizeToClassName.get(size) - ) - return ( - - {children} - - ); - } -} - -export default TextAnchor; diff --git a/src/components/TextAnchor/index.ts b/src/components/TextAnchor/index.ts deleted file mode 100644 index cf2f85a..0000000 --- a/src/components/TextAnchor/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import TextAnchor from "./TextAnchor"; -export default TextAnchor; diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 5ccd7c8..e467134 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -14,11 +14,22 @@ export type Colors = "transparent" | "inherit"; - -export const colorToClass = (color: Colors): string => color ? `color-div__${color}` : undefined; -export const bgColorToClass = (color: Colors): string => color ? `color-div__background_${color}` : undefined; -export const hoverColorToClass = (color: Colors): string => color ? `color-div__${color}Hoverable` : undefined; -export const bgHoverColorToClass = (color: Colors): string => color ? `color-div__background_${color}Hoverable` : undefined; +export const ColorMapper = new Map([ + ["dark-blue", "#002d3a"], + ["light-blue", "#bfdbd9"], + ["white1", "#fff"], + ["black1", "#000"], + ["grey1", "#d4d0c7"], + ["grey2", "#efece4"], + ["orange1", "#d57a2d"], + ["orange2", "#dd934e"], + ["blue1", "#57b2df"], + ["light-turquoise", "#beddeb"], + ["green1", "#c0dcd9"], + ["sand", "#fdf9d7"], + ["transparent", "transparent"], + ["inherit", "inherit"] +]); export const colors = { darkBlue: "#002d3a", @@ -32,5 +43,12 @@ export const colors = { blue1: "#57b2df", lightTurquoise: "#beddeb", green1: "#c0dcd9", - sand: "#fdf9d7" -} \ No newline at end of file + sand: "#fdf9d7", + transparent: "transparent", + inherit: "inherit" +} + +export const colorToClass = (color: Colors): string => color ? `color-div__${color}` : undefined; +export const bgColorToClass = (color: Colors): string => color ? `color-div__background_${color}` : undefined; +export const hoverColorToClass = (color: Colors): string => color ? `color-div__${color}Hoverable` : undefined; +export const bgHoverColorToClass = (color: Colors): string => color ? `color-div__background_${color}Hoverable` : undefined; diff --git a/src/views/ActualPage/ActualPageView.tsx b/src/views/ActualPage/ActualPageView.tsx index a44f3b2..c4eef99 100644 --- a/src/views/ActualPage/ActualPageView.tsx +++ b/src/views/ActualPage/ActualPageView.tsx @@ -1,16 +1,16 @@ import React from "react"; import "./ActualPage.scss"; import PageSection from "@components/PageSection"; -import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection"; -import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem"; +import HeroMainSection from "@components/Hero/HeroMainSection"; +import HeroAsideSection from "@components/Hero/HeroAsideSection"; +import HeroAsideItem from "@components/Hero/HeroAsideItem"; import AsideSection from "@components/AsideSection"; -import MainSection from "@components/MainSection/index"; -import Ribbon from "@components/Ribbon/index"; -import TextAnchor from "@components/TextAnchor/index"; -import Button from "@components/Button/index"; +import MainSection from "@components/MainSection"; +import Ribbon from "@components/Ribbon"; +import TextAnchor from "@components/TextAnchor"; +import Button from "@components/Button"; import Accordion from "@components/Accordion"; -import HeroSecondarySection, { HeroSecondarySectionItem } from "@components/Hero/HeroSecondarySection/HeroSecondarySection"; +import HeroSecondarySection, { HeroSecondarySectionItem } from "@components/Hero/HeroSecondarySection"; import { Event } from "@models/Event"; import { Post } from "@models/Feed"; import EventCalendar from "./EventCalendar"; @@ -93,7 +93,7 @@ const ActualPageView: React.FC = ({events, feed}) => {

Kuvia tapahtumista.

- +
Kuvagalleria ›
 @@ -106,7 +106,7 @@ const ActualPageView: React.FC = ({events, feed}) => {

Sinustako kilta-aktiivi?

- +
Tule mukaan kiltatoimintaan ›
 diff --git a/src/views/ContactsPage/ContactsPageView.tsx b/src/views/ContactsPage/ContactsPageView.tsx index daf1e3d..2c530cc 100644 --- a/src/views/ContactsPage/ContactsPageView.tsx +++ b/src/views/ContactsPage/ContactsPageView.tsx @@ -3,7 +3,7 @@ import "./ContactsPage.scss"; import PageSection from "@components/PageSection"; import { Occupation, Committee } from "@models/Contacts"; import CommitteeContainer from "@components/CommitteeContainer"; -import TextAnchor from "@components/TextAnchor/index"; +import TextAnchor from "@components/TextAnchor"; interface ContactsPageViewProps { contacts: Occupation[]; diff --git a/src/views/CorporatePage/CorporatePageView.tsx b/src/views/CorporatePage/CorporatePageView.tsx index cc55c92..1a88bdb 100644 --- a/src/views/CorporatePage/CorporatePageView.tsx +++ b/src/views/CorporatePage/CorporatePageView.tsx @@ -1,14 +1,14 @@ import React from "react"; import "./CorporatePage.scss"; import PageSection from "@components/PageSection"; -import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection"; -import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem"; +import HeroMainSection from "@components/Hero/HeroMainSection"; +import HeroAsideSection from "@components/Hero/HeroAsideSection"; +import HeroAsideItem from "@components/Hero/HeroAsideItem"; import AsideSection from "@components/AsideSection"; -import MainSection from "@components/MainSection/index"; -import PageLink from "@components/PageLink/index"; -import Ribbon from "@components/Ribbon/index"; -import TextAnchor from "@components/TextAnchor/index"; +import MainSection from "@components/MainSection"; +import PageLink from "@components/PageLink"; +import Ribbon from "@components/Ribbon"; +import TextAnchor from "@components/TextAnchor"; const CorporatePageView: React.FC = () => ( @@ -39,7 +39,7 @@ const CorporatePageView: React.FC = () => (

Lyhyesti killasta ja sen toiminnasta

- +

Aalto-yliopiston Sähköinsinöörikillan jäsenistöstä valmistuvat maan parhaimmat matematiikkaa ja fysiikkaa soveltavat huippuosaajat. Killan tehtävänä on pitää jäsenistään huolta ja edistää aktiivisesti jäsenten ja toimijoiden jaksamista. Killassa opitaan myös tärkeitä työelämätaitoja ammattimaisen killan johtamisen kautta.

Yhteistyömahdollisuudet

@@ -83,7 +83,7 @@ const CorporatePageView: React.FC = () => (

Mainos Sössöön?

- +

Killan lehden mediakortin löydät täältä›

 diff --git a/src/views/EventPage/EventPageView.tsx b/src/views/EventPage/EventPageView.tsx index 0c7b439..cf6f558 100644 --- a/src/views/EventPage/EventPageView.tsx +++ b/src/views/EventPage/EventPageView.tsx @@ -17,27 +17,29 @@ const StyledSection = styled(MainSection)` max-width: 1000px; align-items: center; - h1 { + & > h1 { color: ${colors.darkBlue}; } - img { + & > div > img { + height: auto; width: 100%; - min-height: 100px; } - .event-desc { + & > p { color: ${colors.orange1}; } - - .event-signup-buttons { - display: flex; - flex-flow: row wrap; - justify-content: center; - } +`; + +const SignupButtons = styled.div` + display: flex; + flex-flow: row wrap; + justify-content: center; `; const Content = styled.div` + margin-top: 24px; + p { color: ${colors.black}; } @@ -79,15 +81,17 @@ const EventPageView: React.FC = ({ event }) => {

{event.title_fi}

-

+

{event.description_fi}

- {event.title_fi} +
+ {event.title_fi} +
{/* We may have multiple signup forms. Generate own Button for each one */} -
+ {event.signupForm.map(sf => (
+ ); diff --git a/src/views/FreshmenPage/FreshmenPageView.tsx b/src/views/FreshmenPage/FreshmenPageView.tsx index ea01504..1442ddd 100644 --- a/src/views/FreshmenPage/FreshmenPageView.tsx +++ b/src/views/FreshmenPage/FreshmenPageView.tsx @@ -1,15 +1,15 @@ import React from "react"; import "./FreshmenPage.scss"; -import PageSection from "@components/PageSection/index"; -import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection"; -import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem"; -import AsideSection from "@components/AsideSection/index"; -import MainSection from "@components/MainSection/index"; -import PageLink from "@components/PageLink/index"; -import Ribbon from "@components/Ribbon/index"; -import TextAnchor from "@components/TextAnchor/index"; -import InfoBox from "@components/InfoBox/index"; +import PageSection from "@components/PageSection"; +import HeroMainSection from "@components/Hero/HeroMainSection"; +import HeroAsideSection from "@components/Hero/HeroAsideSection"; +import HeroAsideItem from "@components/Hero/HeroAsideItem"; +import AsideSection from "@components/AsideSection"; +import MainSection from "@components/MainSection"; +import PageLink from "@components/PageLink"; +import Ribbon from "@components/Ribbon"; +import TextAnchor from "@components/TextAnchor"; +import InfoBox from "@components/InfoBox"; import styled from "styled-components"; const KippariImage = styled.img` @@ -54,7 +54,7 @@ const FreshmenPageView: React.FC = () => (

Olet tehnyt upean valinnan ottamalla askeleen matkalla, jossa sinusta ensin kehkeytyy teekkari ja myöhemmin diplomi-insinööri. Sinusta on juuri tullut tekniikan ylioppilas ja fuksi. Hieno saavutus, jota tietysti on syytä juhlia, ja tähän juhlaan paras sijainti on ehdottomasti Otaniemi. Tervetuloa!

Ensi askeleina suosittelen, että liityt teille fukseille tehdyille Telegram-kanaville. Tästä pääset tiedotuskanavalle ja tästä tutustumaan fuksikavereihin ja ISOihisi.

- +
Matka nimeltä Teekkarius

Teekkarin matka on jokaiselle oman näköisensä. Kilta, ylioppilaskunta ja Otaniemen muut järjestöt tarjoavat varmasti jokaiselle omanlaista tekemistä ja harrastusta. Olet nyt osa Aalto-yliopiston Sähköinsinöörikiltaa ja me tulemme tukemaan sinua teekkariuden matkalla, jotta löydät juuri sinulle sopivat paikat, joissa vaikuttaa ja harrastaa. Jotta tämä onnistuisi, olemme esimerkiksi sijoittaneet sinut fuksiryhmään, johon tulet Orientaatioviikolla tutustumaan ja josta saat oman tukiryhmän uusiin seikkailuihin. Fuksiryhmääsi kuuluu myös muutama ISO. Heistä löydät lisää tietoa alempaa.

@@ -102,7 +102,7 @@ const FreshmenPageView: React.FC = () => (

Killassa tapahtuu kaikenlaista!

- +

Seuraa killan tapahtumia

 diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx index 5ef7f0d..c0afdf6 100644 --- a/src/views/FrontPage/FrontPageView.tsx +++ b/src/views/FrontPage/FrontPageView.tsx @@ -7,12 +7,12 @@ import { Post } from "@models/Feed"; import PageSection from "@components/PageSection"; import PageLink from "@components/PageLink/PageLink"; -import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection"; +import HeroMainSection from "@components/Hero/HeroMainSection"; +import HeroAsideSection from "@components/Hero/HeroAsideSection"; import Button from "@components/Button"; import Ribbon from "@components/Ribbon"; import SponsorReel from "@components/SponsorReel"; -import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem"; +import HeroAsideItem from "@components/Hero/HeroAsideItem"; import TextAnchor from "@components/TextAnchor"; interface FrontPageViewProps { @@ -89,7 +89,7 @@ const FrontPageView: React.FC = ({ events, feed }) => (

Sössöä vuodesta 1969.

- +

Lue opiskelijalehden viimeisin numero ›

 diff --git a/src/views/GuildPage/GuildPageView.tsx b/src/views/GuildPage/GuildPageView.tsx index bc64479..bba4dfb 100644 --- a/src/views/GuildPage/GuildPageView.tsx +++ b/src/views/GuildPage/GuildPageView.tsx @@ -4,9 +4,9 @@ import PageSection from "@components/PageSection"; import MainSection from "@components/MainSection"; import AsideSection from "@components/AsideSection"; import PageLink from "@components/PageLink"; -import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection"; -import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem"; +import HeroMainSection from "@components/Hero/HeroMainSection"; +import HeroAsideSection from "@components/Hero/HeroAsideSection"; +import HeroAsideItem from "@components/Hero/HeroAsideItem"; import Ribbon from "@components/Ribbon"; import InfoBox from "@components/InfoBox"; import Accordion from "@components/Accordion"; @@ -132,7 +132,7 @@ const GuildPageView: React.FC = () => ( -

Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.

+

Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.
diff --git a/src/views/StudiesPage/StudiesPageView.tsx b/src/views/StudiesPage/StudiesPageView.tsx index 8f52937..6c319a1 100644 --- a/src/views/StudiesPage/StudiesPageView.tsx +++ b/src/views/StudiesPage/StudiesPageView.tsx @@ -1,14 +1,14 @@ import React from "react"; import "./StudiesPage.scss"; -import PageSection from "@components/PageSection/index"; -import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection"; -import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem"; -import AsideSection from "@components/AsideSection/index"; -import MainSection from "@components/MainSection/index"; -import PageLink from "@components/PageLink/index"; -import Ribbon from "@components/Ribbon/index"; -import TextAnchor from "@components/TextAnchor/index"; +import PageSection from "@components/PageSection"; +import HeroMainSection from "@components/Hero/HeroMainSection"; +import HeroAsideSection from "@components/Hero/HeroAsideSection"; +import HeroAsideItem from "@components/Hero/HeroAsideItem"; +import AsideSection from "@components/AsideSection"; +import MainSection from "@components/MainSection"; +import PageLink from "@components/PageLink"; +import Ribbon from "@components/Ribbon"; +import TextAnchor from "@components/TextAnchor"; const StudiesPageView: React.FC = () => (
@@ -54,17 +54,17 @@ const StudiesPageView: React.FC = () => (
Emmaleena

Fuksivuoden loppupuolella aloin haaveilla oman alan hommista ja päätin laittaa kesätyöhakemuksia yrityksiin ihan laidasta laitaan. Lopulta taisin laittaa niitä jopa 50… Ei mennyt kauaa, kun Profit Softwarelta oltiin yhteydessä ja pääsin sinne haastatteluun. Ennen pitkää olikin jo kesä ja olin päässyt osaksi Profit Softwaren automaatiotraineeteamiä. Jatkoin kesän jälkeen osa-aikaisena traineenä ja seuraavana kesänä pääsinkin scrum master -roolissa ohjaamaan useita erilaisia traineeprojekteja. Ihastuin projektienhallintaan ja jatkan projekti taitojen harjoittamista töissä edelleen.

- +
ALUMNIEN TARINOITA

SIKin alumneja löytyy vaikka mistä! Tässä muutama esimerkki erilaisista työtehtävistä ja tarinoista.

- Kurssitarjonta + Kurssitarjonta - Liity jäseneksi + Liity jäseneksi
@@ -72,7 +72,7 @@ const StudiesPageView: React.FC = () => (

Hae opiskelemaan!

- +

Lue lisää Aallon sivuilta