yaralahruthik

.boldRoboto {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

.normalRoboto {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

yaralahruthik

$red: red;
$blue: blue;

yaralahruthik

@mixin flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

yaralahruthik

import classes from './index.module.scss';

const Card = () => {
  return (
    <div className={classes.container}>
      <span className={classes.title}>Regular Text</span>
      <span className={classes.subTitle}>Bold Text</span>
    </div>
  );
};

yaralahruthik

@use '../../styles/abstracts/variables';
@use '../../styles/abstracts/mixins';

.container {
  @include mixins.flexCenter();
  flex-direction: column;
  background-color: variables.$red;
  color: variables.$blue;
  height: 100vh;
}

yaralahruthik

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ThemeProvider } from '@mui/material/styles';
import { theme } from './styles/theme';

ReactDOM.render(
  <ThemeProvider theme={theme}>

yaralahruthik

import { createTheme } from '@mui/material';

export const theme = createTheme({
  typography: {
    // Tell MUI what's the font-size on the html element is.
    htmlFontSize: 10,
  },
});

yaralahruthik

/* Simple Reset */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

/* For rem size */

yaralahruthik

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const App = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Hello World!</Text>
  </View>
);

const styles = StyleSheet.create({

yaralahruthik

import ReactQueryWay from './components/ReactQueryWay';

import { QueryClient, QueryClientProvider } from 'react-query';
const queryClient = new QueryClient();

const App = () => {
	return (
		<>
			<QueryClientProvider client={queryClient}>
				<ReactQueryWay />