Merge pull request #60 from Giveth/some_fixes_by_ramin

Some fixes by ramin

Author: MohammadPCh

src/common/deviceSize.ts

@@ -0,0 +1,19 @@
+export const deviceSize = {
+	mobileS: 320,
+	mobileM: 375,
+	mobileL: 425,
+	tablet: 768,
+	laptopS: 1024,
+	laptopL: 1280,
+	desktop: 1440,
+};
+
+export const mediaQueries = {
+	mobileS: `@media (min-width: ${deviceSize.mobileS}px)`,
+	mobileM: `@media (min-width: ${deviceSize.mobileM}px)`,
+	mobileL: `@media (min-width: ${deviceSize.mobileL}px)`,
+	tablet: `@media (min-width: ${deviceSize.tablet}px)`,
+	laptopS: `@media (min-width: ${deviceSize.laptopS}px)`,
+	laptopL: `@media (min-width: ${deviceSize.laptopL}px)`,
+	desktop: `@media (min-width: ${deviceSize.desktop}px)`,
+};

src/components/buttons/Button.tsx

@@ -21,6 +21,9 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 			if (props.buttonType === 'texty') {
 				return `color: ${brandColors.giv[500]};background: unset};padding: 8px 24px;opacity: 0.5;`;
 			}
+			if (props.buttonType === 'primary') {
+				return `background: ${brandColors.pinky[300]};color: ${brandColors.pinky[200]};`;
+			}
 			return `color: ${brandColors.giv[400]};background: ${brandColors.giv[500]};opacity: 0.5;`;
 		}
 		switch (props.buttonType) {

src/components/buttons/OulineButton.tsx

@@ -21,7 +21,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 		switch (props.buttonType) {
 			case 'primary':
 				return props.disabled
-					? `color: ${brandColors.giv[500]};border-color: ${brandColors.giv[500]};opacity: 0.4;`
+					? `color: ${brandColors.pinky[300]};border-color: ${brandColors.pinky[300]};`
 					: `color: ${brandColors.pinky[400]};border-color: ${brandColors.pinky[400]};`;
 			case 'secondary':
 				return props.disabled

src/components/buttons/common.tsx

@@ -12,8 +12,12 @@ export const LoadingContainer = styled.div<{ loading: number }>`
 export const Loader = styled.div<IButtonContainerProps>`
 	border: 3px solid
 		${props => {
-			if (props.disabled) return brandColors.giv[600];
-
+			if (props.disabled) {
+				switch (props.buttonType) {
+					case 'primary':
+						return brandColors.pinky[400];
+				}
+			}
 			switch (props.buttonType) {
 				case 'primary':
 					return brandColors.pinky[600];

src/index.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './common/colors';
+export * from './common/deviceSize';