feat: adding authentication page UI based on Figma

client/lib/Screens/login/login_screen.dart

@@ -0,0 +1,145 @@
+import 'package:flutter/material.dart';
+
+class LoginScreen extends StatelessWidget {
+  const LoginScreen({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: ListView(
+        padding: EdgeInsets.symmetric(
+            horizontal: MediaQuery.of(context).size.width / 8),
+        children: const [
+          Menu(),
+          Body(),
+        ],
+      ),
+    );
+  }
+}
+
+class Menu extends StatelessWidget {
+  const Menu({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 30),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: [
+          Image.asset(
+            'icons/release_icon_transparent.png',
+            width: 41,
+            height: 65,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class Body extends StatelessWidget {
+  const Body({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    TextTheme texttheme = Theme.of(context).textTheme;
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        SizedBox(
+          width: 380,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                '   Sign In to the\nCommunity Portal',
+                style: texttheme.headline1,
+              ),
+              Text(
+                "If you don't have an account",
+                style: texttheme.subtitle2,
+              ),
+              Row(
+                children: [
+                  RichText(
+                    text: TextSpan(
+                      text: 'You can',
+                      style: texttheme.subtitle2,
+                    ),
+                  ),
+                  Text(
+                    ' Register here!',
+                    style: TextStyle(
+                        color: Theme.of(context).primaryColor,
+                        fontWeight: FontWeight.bold),
+                  ),
+                ],
+              ),
+              Image.asset(
+                'icons/release_icon_with_name_transparent.png',
+                width: 400,
+              ),
+            ],
+          ),
+        ),
+        Padding(
+          padding: EdgeInsets.symmetric(
+              vertical: MediaQuery.of(context).size.height / 6),
+          child: SizedBox(
+            width: 320,
+            child: _formLogin(context),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _formLogin(context) {
+    return Column(
+      children: [
+        const TextField(
+          decoration: InputDecoration(
+            hintText: 'Enter email or Phone number',
+            labelStyle: TextStyle(fontSize: 12),
+          ),
+        ),
+        const SizedBox(height: 30),
+        const TextField(
+          decoration: InputDecoration(
+            hintText: 'Password',
+            counterText: 'Forgot password?',
+            suffixIcon: Icon(
+              Icons.visibility_off_outlined,
+            ),
+            labelStyle: TextStyle(fontSize: 12),
+          ),
+        ),
+        const SizedBox(
+          height: 40,
+        ),
+        Container(
+          decoration: BoxDecoration(
+            color: Theme.of(context).primaryColor,
+            borderRadius: BorderRadius.circular(30),
+          ),
+          child: ElevatedButton(
+            onPressed: () => ("it's pressed"),
+            style: ElevatedButton.styleFrom(
+              onPrimary: Colors.white,
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(15),
+              ),
+            ),
+            child: const SizedBox(
+                width: double.infinity,
+                height: 50,
+                child: Center(child: Text('Sign In'))),
+          ),
+        ),
+        const SizedBox(height: 40),
+      ],
+    );
+  }
+}

client/lib/main.dart

@@ -1,3 +1,5 @@
+import 'package:client/Screens/login/login_screen.dart';
+import 'package:client/themes/theme_constants.dart';
 import 'package:flutter/material.dart';
 
 void main() {
@@ -11,60 +13,9 @@ class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: 'Flutter Demo',
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
-      ),
-      home: const MyHomePage(title: 'Flutter Demo Home Page'),
-    );
-  }
-}
-
-class MyHomePage extends StatefulWidget {
-  const MyHomePage({Key? key, required this.title}) : super(key: key);
-
-  final String title;
-
-  @override
-  State<MyHomePage> createState() => _MyHomePageState();
-}
-
-class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
-
-  void _incrementCounter() {
-    setState(() {
-      _counter++;
-    });
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(widget.title),
-      ),
-      body: Center(
-        // Center is a layout widget. It takes a single child and positions it
-        // in the middle of the parent.
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            const Text(
-              'You have pushed the button this many times:',
-            ),
-            Text(
-              '$_counter',
-              style: Theme.of(context).textTheme.headline4,
-            ),
-          ],
-        ),
-      ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: const Icon(Icons.add),
-      ), // This trailing comma makes auto-formatting nicer for build methods.
-    );
+        title: 'Community-portal',
+        theme: lightTheme,
+        home: const LoginScreen(),
+        debugShowCheckedModeBanner: false);
   }
 }

client/lib/themes/theme_constants.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+Color primary = const Color(0xFFFF8714);
+Color onprimary = const Color(0xFF000000);
+Color secondary = const Color(0xFFF5F5F5);
+Color onsecondary = const Color(0xFFFFFFFF);
+Color background = const Color(0xFFFFFFFF);
+
+ThemeData lightTheme = ThemeData(
+  brightness: Brightness.light,
+  primaryColor: primary,
+  floatingActionButtonTheme: FloatingActionButtonThemeData(
+    backgroundColor: primary,
+  ),
+  elevatedButtonTheme: ElevatedButtonThemeData(
+    style: ButtonStyle(
+      shape: MaterialStateProperty.all<OutlinedBorder>(
+        RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(20.0),
+        ),
+      ),
+      backgroundColor: MaterialStateProperty.all<Color>(primary),
+    ),
+  ),
+  inputDecorationTheme: InputDecorationTheme(
+    border: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(15), borderSide: BorderSide.none),
+    filled: true,
+    fillColor: secondary.withOpacity(1.0),
+    suffixIconColor: Colors.grey,
+    contentPadding: const EdgeInsetsDirectional.only(start: 30),
+  ),
+  textTheme: const TextTheme(
+    headline1: TextStyle(
+      fontSize: 45.0,
+      fontWeight: FontWeight.bold,
+      color: Colors.black,
+    ),
+    headline2: TextStyle(
+      fontSize: 24.0,
+      fontWeight: FontWeight.bold,
+      color: Colors.black,
+    ),
+    headline3: TextStyle(
+      fontSize: 18.0,
+      fontWeight: FontWeight.bold,
+    ),
+    headline4: TextStyle(
+      fontSize: 16.0,
+      fontWeight: FontWeight.bold,
+      color: Colors.black,
+    ),
+    bodyText2: TextStyle(
+      fontSize: 14,
+      letterSpacing: 0.5,
+    ),
+    subtitle1: TextStyle(
+      fontSize: 14.0,
+    ),
+    subtitle2: TextStyle(
+      fontSize: 12.0,
+    ),
+  ),
+);

client/pubspec.yaml

@@ -58,8 +58,8 @@ flutter:
   uses-material-design: true
 
   # To add assets to your application, add an assets section, like this:
-  # assets:
-  #   - images/a_dot_burr.jpeg
+  assets:
+   - assets/icons/
   #   - images/a_dot_ham.jpeg
 
   # An image asset can refer to one or more resolution-specific "variants", see