Skip to content

Commit

Permalink
finished login screen
Browse files Browse the repository at this point in the history 
added opret button
style changes to buttons
  • Loading branch information
@Lyallvaldr
Lyallvaldr committed Nov 24, 2023
1 parent 4b4dd4e commit 9f7da51
Show file tree
Hide file tree
Showing 4 changed files with 518 additions and 54 deletions.
134 changes: 81 additions & 53 deletions lib/screens/login_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ import 'package:weekplanner/screens/pictogram_login_screen.dart';
import 'package:weekplanner/style/font_size.dart';
import 'package:weekplanner/widgets/giraf_notify_dialog.dart';
import 'package:weekplanner/widgets/loading_spinner_widget.dart';
import 'package:weekplanner/widgets/giraf_login_button_widget.dart';
import 'package:weekplanner/widgets/giraf_opret_button_widget.dart';
import 'package:api_client/models/displayname_model.dart';
import 'package:weekplanner/screens/new_citizen_screen.dart';


import '../style/custom_color.dart' as theme;
Expand Down Expand Up @@ -146,12 +149,12 @@ class LoginScreenState extends State<LoginScreen> {
///Used to check if the keyboard is visible
final bool keyboard = MediaQuery.of(context).viewInsets.bottom > 0;

final ButtonStyle girafButtonStyle = ElevatedButton.styleFrom(
backgroundColor: theme.GirafColors.loginButtonColor,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
);
// final ButtonStyle girafButtonStyle = ElevatedButton.styleFrom(
// backgroundColor: theme.GirafColors.loginButtonColor,
// shape: const RoundedRectangleBorder(
// borderRadius: BorderRadius.all(Radius.circular(10.0)),
// ),
// );

return Scaffold(
resizeToAvoidBottomInset: false,
Expand All @@ -176,7 +179,7 @@ class LoginScreenState extends State<LoginScreen> {
height: screenSize.height,
padding: portrait
? const EdgeInsets.fromLTRB(50, 0, 50, 0)
: const EdgeInsets.fromLTRB(200, 0, 200, 8),
: const EdgeInsets.fromLTRB(200, 0, 200, 0),
decoration: const BoxDecoration(
color: Colors.white,
),
Expand Down Expand Up @@ -253,7 +256,7 @@ class LoginScreenState extends State<LoginScreen> {
),
Padding(
padding: portrait
? const EdgeInsets.fromLTRB(0, 20, 0, 10)
? const EdgeInsets.fromLTRB(0, 10, 0, 10)
: const EdgeInsets.fromLTRB(0, 0, 0, 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
Expand Down Expand Up @@ -333,62 +336,87 @@ class LoginScreenState extends State<LoginScreen> {
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 25, 0, 5),
child: Container(
child: Transform.scale(
scale: 1.5,
child: ElevatedButton(
key: const Key('LoginBtnKey'),
style: girafButtonStyle,
child: const Text(
'LOGIN',
style: TextStyle(color: theme.GirafColors.white, fontSize: GirafFont.large),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Transform.scale(
scale: 1,
child: GirafButtonOpret(
key: const Key('OpretBtnKey'),
text: 'Opret',
onPressed: () {
Routes().push(context, NewCitizenScreen());
},
),
),
onPressed: () {
loginAction(context);
},
),
),
),
),
// Autologin button, only used for debugging
environment.getVar<bool>('DEBUG')
? Container(
child: Transform.scale(
scale: 1.2,
child: ElevatedButton(
style: girafButtonStyle,
child: const Text(
'AUTO-LOGIN',
key: Key('AutoLoginKey'),
style: TextStyle(color: theme.GirafColors.white, fontSize: GirafFont.large),
Padding(
padding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
),
onPressed: () {
usernameCtrl.text =
environment.getVar<String>('USERNAME');
passwordCtrl.text =
environment.getVar<String>('PASSWORD');
loginAction(context);
},
),

Container(
child: Transform.scale(
scale: 1,
child: GirafButtonLogin(
key: const Key('LoginBtnKey'),
text: 'Login',
onPressed: () {
loginAction(context);
},

),
),
),
],
),
)
: Container(),
),

],
),
)
]),
]
),
),
),
Expanded(
flex: 1,
child: Container(
height: screenSize.height,
child: Image.asset(
'assets/icons/giraf_blue_long.png',
repeat: ImageRepeat.repeat,
fit: BoxFit.cover,
),
)
child: Stack(
children: <Widget>[
Container(
height: screenSize.height,
child: Image.asset(
'assets/icons/giraf_blue_long.png',
repeat: ImageRepeat.repeat,
fit: BoxFit.cover,
),
),

// Autologin button, only used for debugging
environment.getVar<bool>('DEBUG')
? Container(
padding: EdgeInsets.only(left: screenSize.width*0.02,top: screenSize.height*0.9,right: screenSize.width*0.02, bottom: screenSize.height*0.03 ),
child: Transform.scale(
scale: 1,
child: GirafButtonLogin(
text: 'AUTO',
key: Key('AutoLoginKey'),
onPressed: () {
usernameCtrl.text =
environment.getVar<String>('USERNAME');
passwordCtrl.text =
environment.getVar<String>('PASSWORD');
loginAction(context);
},
),
),
)

: Container(),

],
),

),
Expanded(
flex: 1,
Expand Down
12 changes: 11 additions & 1 deletion lib/style/custom_color.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ class GirafColors {
static const Color loginFieldText = Color.fromRGBO(170, 170, 170, 1);

/// Color for the login button
static const Color loginButtonColor = Color.fromRGBO(48, 81, 118, 1);
static const Color loginButtonColor = Color.fromRGBO(0, 160, 35, 1);
/// Color for the top of the login button
static const Color loginButtonColorLight = Color.fromRGBO(0, 217, 47, 1);
/// Color for the login button when pressed
static const Color loginButtonColorLightPressed = Color.fromRGBO(49, 181, 78, 1);

/// Color for the buttons
static const Color buttonColor = Color(0xA0FFFFFF);
Expand Down Expand Up @@ -56,6 +60,8 @@ class GirafColors {

static const Color gradientDefaultDarkBlue = Color(0xFF005285);

static const Color gradientDefaultBluePressed = Color.fromARGB(255, 35, 131, 190);

/// Border color for button default gradient
static const Color gradientDefaultBorder = Color(0xFF8A6E00);

Expand All @@ -77,6 +83,10 @@ class GirafColors {
/// Border color for button disabled gradient
static const Color gradientDisabledBorder = Color(0x668A6E00);

static const Color gradientGreenBorder = Color.fromARGB(102, 14, 71, 23);

static const Color gradientBlueBorder = Color.fromARGB(102, 14, 26, 72);

/// Color for error messages (Same as dart standard)
static const Color errorColor = Color(0xFFD32F2F);

Expand Down
Loading

0 comments on commit 9f7da51

Please sign in to comment.