Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

notification bar enhanced #102

Merged
merged 3 commits into from
Oct 6, 2022
Merged

Conversation

LalitChauhan27
Copy link
Contributor

Related Issue

Proposed Changes

  • Material UI added for notification bar button class.
  • Notification bar components now are in center.
  • Added smooth collapse animation

Checklist

  • Documentation of the code
  • Add your name to the CONTRIBUTORS file
  • Testing your code in the local machine

Screenshots

P1

@netlify
Copy link

netlify bot commented Oct 6, 2022

Deploy Preview for girlscript-asansol ready!

Name Link
🔨 Latest commit 9427661
🔍 Latest deploy log https://app.netlify.com/sites/girlscript-asansol/deploys/633e9f198d253a0008d260c1
😎 Deploy Preview https://deploy-preview-102--girlscript-asansol.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

index.html Outdated
@@ -92,9 +92,9 @@

<!-- Dismissable notification bar -->
<div class="notif-bar-btn" id="close">
<div style="display: flex;width:73%;align-items: flex-end;">
<div style="display: flex;width:73%;align-items: flex-end; justify-content: center;"><!--To center only the text and the button-->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change align-items: flex-end to align-items: center to nicely centre the elements inside the notif-bar vertically.

styles.css Outdated
@@ -33,12 +33,77 @@ body.dark {

/* general styling for dismissable alert */
.notif-bar-btn{
background-color: #FE6155;
background-color: #00111c; /*mentioned color added*/
color: white;
height: 3rem;
display: flex;
align-items: center;
justify-content: flex-end;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change justify-content: flex-end; to justify-content: center;,

index.html Outdated
<div style="margin-right: 1rem;">Join us on Discord!</div>
<a href="https://discord.gg/vYSspBkgNc"><Button style="background-color: rgb(54,66,86);color:white;margin-right: 1rem;border-radius: 0.5rem;">Join Discord</Button></a>
<a href="https://discord.gg/vYSspBkgNc"><button class="button-61" role="button">Join Discord</button></a><!--Material UI button added-->
</div>
<div style="display: flex;width: 10%;justify-content: flex-end; margin-right: 1rem;">
Copy link
Member

@jayzsh jayzsh Oct 6, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line 99: change style to position:fixed; right: 30px. That should be it.

Copy link
Member

@jayzsh jayzsh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@LalitChauhan27 You can now create a commit with the above changes. The PR will be updated automatically.

@LalitChauhan27
Copy link
Contributor Author

Hey @jay-io, can you please add the
4
label.

@jayzsh jayzsh merged commit 457565e into gsasansol:main Oct 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants