yalla-coop / website-redesign Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
Page header landing, is the top part of each page that has an arrow down with a heading and subheading
https://www.figma.com/file/e7lI7XGEGvCAxKcnktUfkt/Yalla-Website-Redesign?node-id=82%3A630
This component is a small representation for a work/project that has been done and it contains the following:
{
padding: 35px;
background: #020F1D; /* this color is found in utils folder */
width: 638px; /* we should be able to fit two next to each other in one container */
}
An image:
this one should be inside of a div that takes the full width of the container(box wrapper)
Caps heading small w/medium font-weight
Caps heading 4
{ color: #fff; /* white from utils */ }
Main Props:
This is how the component should look like when given all the props
This component should contain:
{
font-size: 100px;
color: #C73E46;
font-weight: 700;
/* and these spacings: */
margin: 0 19px 15px 0;
}
{
color: #000000;
margin-bottom: 50px; /* the space between it and the paragraph */
}
{
color: #858585;
margin-bottom: 8px;
}
{
color: #000000;
margin-bottom: 5px;
}
{
color: #C4C4C4;
}
And these elements should be a representation for the following props:
Customized by the following props:
Prop name | Data type | Default value | Description |
---|---|---|---|
onClick | EventListener | () => {} |
|
color | string(css color) | primary app color |
Color of the button background |
textColor | string(css color) | primary white color |
Color of button text |
title | string | 'Click me' |
Text to display |
hasArrow | boolean | false |
Determines if the button has an arrow or not |
capitalize | boolean | false |
Determines if the button text is in Uppercase or not |
primary | boolean | false |
Overrides the background color, text color, capitalize and hasArrow if used |
Hey @jema28 @thejoefriel @dupreesi @ashatat
it would be great to get your inputs to choose what do we need to use from these options:
Mobile - Small
Mobile - Medium
Mobile - Large / Tablet:
Laptop:
some parts of the footer are too close to each other fix them so they look like the Figma
We have one input component in our design but it can look different according to its size:
Main Props:
Main Styles:
/* we might use the variables we have in the utils folder */
padding: 16px;
margin-top: 6px; /* between the label and the box */
background: rgba(196, 196, 196, 0.05);
border: 1px solid rgba(224, 224, 224, 0.5);
To this one, you can apply all of the above but the width and height should be bigger for the input box as you can see
/* these will not be static forever */
width: 674px;
height: 227px;
This component is a small representation for a story/post that has been done and it contains the following:
background: white;
An image:
this one should be inside of a div that takes the full width of the container(box wrapper)
Caps heading small w/medium font-weight
color: #858585; /* you can find it in utils */
color: primary; /* primary from utils */
Main Props:
This is how the component should look like when given all the props
It would be good to get some consistent photos of us all for the website. I also don't ever want to see the photo of me that we used on recent pitches haha!!
So, thoughts:
Normal photo
Everyone gets someone to take a photo of them in front of a white wall. Then send either to me (or @jema28 if you'd like to do it) to add some styling onto it.
Left field ideas
I think it would be fun to actually do something a bit different perhaps! So potential options:
Feel free to add other ideas as comments
Using this as a reference: https://github.com/jema28/what-im-learning
Creating utils for :
This component should contain the following:
span
inside of the heading for the numberGeneral styles:
{
background: primary;
color: white;
}
Follow the Figma/Zeplin for more specific styles like spacing, etc
Commitlint checks if your commit messages meet the conventional commit format.
In general, the pattern mostly looks like this:
type(scope?): subject #scope is optional
Common types
Why Use Conventional Commits
The margin before and after the email link should be the same as the Figma
Mobile - Small:
Mobile - Medium:
Mobile - Large / Tablet:
Laptop:
Desktop:
There is a problem with the navbar height and also the colors it doesn't work all the time
The accent height is in rems and it doesn't work right most of the time so if we change it to pixels it works just fine
This is a problem that I've faced when I was working with headings mostly. They need a different color so I always had to write more CSS to override that.
We can put a property that can change based on a prop
color: {({ color }) => color }
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.