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

Refactoring CSS files: merged PageNotFound styles into global app.module.css #2697

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .coderabbit.yaml
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Check warning on line 1 in .coderabbit.yaml

View workflow job for this annotation

GitHub Actions / Performs linting, formatting, type-checking, checking for different source and target branch

File ignored by default.
language: "en-US"
language: 'en-US'
early_access: false
reviews:
profile: "chill"
profile: 'chill'
request_changes_workflow: true
high_level_summary: true
poem: true
Expand Down
6 changes: 3 additions & 3 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{

Check warning on line 1 in .prettierrc

View workflow job for this annotation

GitHub Actions / Performs linting, formatting, type-checking, checking for different source and target branch

File ignored by default.
"singleQuote": true,
"endOfLine": "auto"
}
"singleQuote": true,
"endOfLine": "auto"
}
112 changes: 58 additions & 54 deletions CODE_STYLE.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ code style should not be changed and must be followed.

- Typescript

- React.js
- React.js

- CSS module

Expand All @@ -43,10 +43,9 @@ code style should not be changed and must be followed.

- Should make use of React hooks where appropriate


## Code Style and Naming Conventions

- All React components *must* be written in PascalCase, with their file names, and associated CSS modules being written in PascalCase
- All React components _must_ be written in PascalCase, with their file names, and associated CSS modules being written in PascalCase

- All other files may follow the camelCase naming convention

Expand All @@ -55,13 +54,15 @@ code style should not be changed and must be followed.
- Use of custom classes directly are refrained, use of modular css is encouraged along with bootstrap classes

**Wrong way ❌**

```
<div className="myCustomClass">...</div>
<div className={`${styles.myCustomClass1} myCustomClass2`}>...</div> // No using personal custom classes directly, here you should not use myCustomClass2
.container{...} // No changing the property of already existing classes reserved by boostrap directly in css files
```

**Correct ways ✅**
**Correct ways ✅**
Comment on lines +57 to +64
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Add language specification to the code block.

Add HTML/CSS language identifier to enable syntax highlighting for better readability.

-```
+```html
<div className="myCustomClass">...</div>
🧰 Tools
🪛 Markdownlint (0.37.0)

64-64: null
Emphasis used instead of a heading

(MD036, no-emphasis-as-heading)


58-58: null
Fenced code blocks should have a language specified

(MD040, fenced-code-language)


```
<div className={styles.myCustomClass}>...</div> // Use custom class defined in modular css file
<div className={`${styles.myCustomClass} relative bg-danger`}>...</div> // Use classes already defined in Bootstrap
Expand All @@ -74,7 +75,8 @@ code style should not be changed and must be followed.

**Wrong way ❌**

Using plain Bootstrap classes and attributes without leveraging the React-Bootstrap library should be refrained. While it may work for basic functionality, it doesn't fully integrate with React and may cause issues when dealing with more complex state management or component interactions.
Using plain Bootstrap classes and attributes without leveraging the React-Bootstrap library should be refrained. While it may work for basic functionality, it doesn't fully integrate with React and may cause issues when dealing with more complex state management or component interactions.

```
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Expand All @@ -87,11 +89,11 @@ Using plain Bootstrap classes and attributes without leveraging the React-Bootst
</ul>
</div>
```


**Correct way ✅**

It's recommended to use the React-Bootstrap library for seamless integration of Bootstrap components in a React application.

```
import Dropdown from 'react-bootstrap/Dropdown';

Expand All @@ -114,29 +116,29 @@ function BasicExample() {
export default BasicExample;
```

## Test and Code Linting

## Test and Code Linting

Unit tests must be written for *all* code submissions to the repository,
Unit tests must be written for _all_ code submissions to the repository,
the code submitted must also be linted ESLint and formatted with Prettier.

## Folder/Directory Structure

### Sub Directories of `src`

`assets` - This houses all of the static assets used in the project
- `css` - This houses all of the css files used in the project
- `images` - This houses all of the images used in the project
- `scss` - This houses all of the scss files used in the project
- `components -` All Sass files for components
- `content -` All Sass files for content
- `forms -` All Sass files for forms
- `_talawa.scss` - Partial Sass file for Talawa
- `_utilities.scss` - Partial Sass file for utilities
- `_variables.scss` - Partial Sass file for variables
- `app.scss` - Main Sass file for the app, imports all other partial Sass files

`components` - The directory for base components that will be used in the various views/screens

- `css` - This houses all of the css files used in the project
- `images` - This houses all of the images used in the project
- `scss` - This houses all of the scss files used in the project
- `components -` All Sass files for components
- `content -` All Sass files for content
- `forms -` All Sass files for forms
- `_talawa.scss` - Partial Sass file for Talawa
- `_utilities.scss` - Partial Sass file for utilities
- `_variables.scss` - Partial Sass file for variables
- `app.scss` - Main Sass file for the app, imports all other partial Sass files

`components` - The directory for base components that will be used in the various views/screens

`Constant` - This houses all of the constants used in the project

Expand All @@ -148,7 +150,6 @@ the code submitted must also be linted ESLint and formatted with Prettier.

`utils` - This holds the utility functions that do not fall into any of the other categories


## Imports

Absolute imports have been set up for the project, so imports may be done directly from `src`.
Expand All @@ -161,13 +162,12 @@ import Navbar from 'components/Navbar/Navbar';

Imports should be grouped in the following order:

- React imports
- Third party imports
- Local imports

- React imports
- Third party imports
- Local imports

If there is more than one import from a single library, they should be grouped together

Example - If there is single import from a library, both ways will work

```
Expand All @@ -190,38 +190,40 @@ Follow this [link](https://getbootstrap.com/docs/5.3/customize/sass/) to learn h
**File Structure**

- `src/assets/scss/components/{'{partialFile}'}.scss` - where the {'{partialFile}'} are the following files
- **_accordion.scss**
- **_alert.scss**
- **_badge.scss**
- **_breadcrumb.scss**
- **_buttons.scss**
- **_card.scss**
- **_carousel.scss**
- **_close.scss**
- **_dropdown.scss**
- **_list-group.scss**
- **_modal.scss**
- **_nav.scss**
- **_navbar.scss**
- **_offcanvas.scss**
- **_pagination.scss**
- **_placeholder.scss**
- **_progress.scss**
- **_spinners.scss**

- **\_accordion.scss**
- **\_alert.scss**
- **\_badge.scss**
- **\_breadcrumb.scss**
- **\_buttons.scss**
- **\_card.scss**
- **\_carousel.scss**
- **\_close.scss**
- **\_dropdown.scss**
- **\_list-group.scss**
- **\_modal.scss**
- **\_nav.scss**
- **\_navbar.scss**
- **\_offcanvas.scss**
- **\_pagination.scss**
- **\_placeholder.scss**
- **\_progress.scss**
- **\_spinners.scss**

- `src/assets/scss/content/{'{partialFile}'}.scss` - where the {'{partialFile}'} are the following files
- **_table.scss**
- **_typography.scss**

- **\_table.scss**
- **\_typography.scss**

- `src/assets/scss/forms/{'{partialFile}'}.scss` - where the {'{partialFile}'} are the following files
- **_check-radios.scss**
- **_floating-label.scss**
- **_form-control.scss**
- **_input-group.scss**
- **_range.scss**
- **_select.scss**
- **_validation.scss**

- **\_check-radios.scss**
- **\_floating-label.scss**
- **\_form-control.scss**
- **\_input-group.scss**
- **\_range.scss**
- **\_select.scss**
- **\_validation.scss**

- `src/assets/scss/_utilities.scss` - The utility API is a Sass-based tool to generate utility classes.
- `src/assets/scss/_variables.scss` - This file contains all the Sass variables used in the project
Expand All @@ -245,9 +247,11 @@ To watch the Sass file for changes and compile it automatically, run the followi
```
npx sass src/assets/scss/app.scss src/assets/css/app.css --watch
```

The `src/assets/css/app.css.map` file associates the generated CSS code with the original SCSS code. It allows you to see your SCSS code in the browser's developer tools for debugging.

To skip generating the map file, run

```
npx sass --no-source-map src/assets/scss/app.scss src/assets/css/app.css
```
18 changes: 11 additions & 7 deletions DOCUMENTATION.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# Documentation

Welcome to our documentation guide. Here are some useful tips you need to know!

# Table of Contents
Expand All @@ -15,18 +16,21 @@ Welcome to our documentation guide. Here are some useful tips you need to know!

Our documentation can be found in ONLY TWO PLACES:

1. ***Inline within the repository's code files***: We have automated processes to extract this information and place it in our Talawa documentation site [docs.talawa.io](https://docs.talawa.io/).
1. ***In our `talawa-docs` repository***: Our [Talawa-Docs](https://github.com/PalisadoesFoundation/talawa-docs) repository contains user edited markdown files that are automatically integrated into our Talawa documentation site [docs.talawa.io](https://docs.talawa.io/) using the [Docusaurus](https://docusaurus.io/) package.
1. **_Inline within the repository's code files_**: We have automated processes to extract this information and place it in our Talawa documentation site [docs.talawa.io](https://docs.talawa.io/).
1. **_In our `talawa-docs` repository_**: Our [Talawa-Docs](https://github.com/PalisadoesFoundation/talawa-docs) repository contains user edited markdown files that are automatically integrated into our Talawa documentation site [docs.talawa.io](https://docs.talawa.io/) using the [Docusaurus](https://docusaurus.io/) package.

## How to use Docusaurus

The process in easy:

1. Install `talawa-docs` on your system
1. Launch docusaurus on your system according to the `talawa-docs`documentation.
- A local version of `docs.talawa.io` should automatically launched in your browser at http://localhost:3000/
1. Launch docusaurus on your system according to the `talawa-docs`documentation.
- A local version of `docs.talawa.io` should automatically launched in your browser at http://localhost:3000/
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix grammar in the documentation

The sentence has incorrect verb form.

-A local version of `docs.talawa.io` should automatically launched in your browser at http://localhost:3000/
+A local version of `docs.talawa.io` should automatically launch in your browser at http://localhost:3000/
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
- A local version of `docs.talawa.io` should automatically launched in your browser at http://localhost:3000/
- A local version of `docs.talawa.io` should automatically launch in your browser at http://localhost:3000/
🧰 Tools
🪛 LanguageTool

[grammar] ~28-~28: The modal verb ‘should’ requires the verb’s base form.
Context: ...f docs.talawa.io should automatically launched in your browser at http://localhost:300...

(MD_BASEFORM)

🪛 Markdownlint (0.37.0)

28-28: null
Bare URL used

(MD034, no-bare-urls)

1. Add/modify the markdown documents to the `docs/` directory of the `talawa-docs` repository
1. If adding a file, then you will also need to edit the `sidebars.js` which is used to generate the [docs.talawa.io](https://docs.talawa.io/) menus.
1. Always monitor the local website in your brower to make sure the changes are acceptable.
- You'll be able to see errors that you can use for troubleshooting in the CLI window you used to launch the local website.
1. Always monitor the local website in your brower to make sure the changes are acceptable.
- You'll be able to see errors that you can use for troubleshooting in the CLI window you used to launch the local website.

## Other information
***PLEASE*** do not add markdown files in this repository. Add them to `talawa-docs`!

**_PLEASE_** do not add markdown files in this repository. Add them to `talawa-docs`!
14 changes: 9 additions & 5 deletions ISSUE_GUIDELINES.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@

In order to give everyone a chance to submit a issues reports and contribute to the Talawa project, we have put restrictions in place. This section outlines the guidelines that should be imposed upon issue reports in the Talawa project.

___
---

## Table of Contents

<!-- toc -->
Expand All @@ -18,15 +19,17 @@ ___

<!-- tocstop -->

___
---

## Issue Management

In all cases please use the [GitHub open issue search](https://github.com/PalisadoesFoundation/talawa-admin/issues) to check whether the issue has already been reported.

### New Issues

To create new issues follow these steps:

1. Your issue may have already been created. Search for duplicate open issues before submitting yours.for similar deficiencies in the code.duplicate issues are created.
1. Your issue may have already been created. Search for duplicate open issues before submitting yours.for similar deficiencies in the code.duplicate issues are created.
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix the grammatical errors in the duplicate issue search guidance.

The current sentence has concatenation errors and unclear wording.

-1. Your issue may have already been created. Search for duplicate open issues before submitting yours.for similar deficiencies in the code.duplicate issues are created.
+1. Your issue may have already been created. Search for duplicate open issues before submitting yours to avoid redundancy.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
1. Your issue may have already been created. Search for duplicate open issues before submitting yours.for similar deficiencies in the code.duplicate issues are created.
1. Your issue may have already been created. Search for duplicate open issues before submitting yours to avoid redundancy.

1. Verify whether the issue has been fixed by trying to reproduce it using the latest master or development branch in the repository.
1. Click on the [`New Issue`](https://github.com/PalisadoesFoundation/talawa-admin/issues/new/choose) button
1. Use the templates to create a standardized report of what needs to be done and why.
Expand All @@ -49,11 +52,12 @@ Working on these types of existing issues is a good way of getting started with

Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the mentors of the merits of this feature. Please provide as much detail and context as possible.

### Monitoring the Creation of New Issues
### Monitoring the Creation of New Issues

1. Join our `#talawa-github` slack channel for automatic issue and pull request updates.

## General Guidelines

1. Discuss issues in our various slack channels when necessary
2. Please do not derail or troll issues.
2. Please do not derail or troll issues.
Comment on lines 61 to +62
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Fix capitalization and punctuation.

  • "Slack" should be capitalized as it's a proper noun
  • Add a comma after "when necessary" for better readability
-1. Discuss issues in our various slack channels when necessary
+1. Discuss issues in our various Slack channels when necessary,
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
1. Discuss issues in our various slack channels when necessary
2. Please do not derail or troll issues.
2. Please do not derail or troll issues.
1. Discuss issues in our various Slack channels when necessary,
2. Please do not derail or troll issues.
🧰 Tools
🪛 LanguageTool

[grammar] ~61-~61: Did you mean the communication tool “Slack” (= proper noun, capitalized)?
Context: ...lines 1. Discuss issues in our various slack channels when necessary 2. Please do no...

(ON_SKYPE)


[typographical] ~61-~61: Consider adding a comma here.
Context: ...ur various slack channels when necessary 2. Please do not derail or troll issues. 3. Keep ...

(PLEASE_COMMA)

3. Keep the discussion on topic and respect the opinions of others.
1 change: 1 addition & 0 deletions PR_GUIDELINES.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ npm run format:check
1. Please read our [CONTRIBUTING.md](CONTRIBUTING.md) document for details on our testing policy.

## Pull Request Processing

These are key guidelines for the procedure:

### Only submit PRs against our `develop` branch, not the default `main` branch
Expand Down
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@ Core features include:

1. You can install the software for this repository using the steps in our [INSTALLATION.md](INSTALLATION.md) file.
1. Do you want to contribute to our code base? Look at our [CONTRIBUTING.md](CONTRIBUTING.md) file to get started. There you'll also find links to:
1. Our code of conduct documentation in the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) file.
1. How we handle the processing of new and existing issues in our [ISSUE_GUIDELINES.md](ISSUE_GUIDELINES.md) file.
1. The methodologies we use to manage our pull requests in our [PR_GUIDELINES.md](PR_GUIDELINES.md) file.
1. Our code of conduct documentation in the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) file.
1. How we handle the processing of new and existing issues in our [ISSUE_GUIDELINES.md](ISSUE_GUIDELINES.md) file.
1. The methodologies we use to manage our pull requests in our [PR_GUIDELINES.md](PR_GUIDELINES.md) file.
1. The `talawa` documentation can be found at our [docs.talawa.io](https://docs.talawa.io) site.
1. It is automatically generated from the markdown files stored in our [Talawa-Docs GitHub repository](https://github.com/PalisadoesFoundation/talawa-docs). This makes it easy for you to update our documenation.
1. It is automatically generated from the markdown files stored in our [Talawa-Docs GitHub repository](https://github.com/PalisadoesFoundation/talawa-docs). This makes it easy for you to update our documenation.

# Videos
# Videos

1. Visit our [YouTube Channel playlists](https://www.youtube.com/@PalisadoesOrganization/playlists) for more insights
1. The "[Getting Started - Developers](https://www.youtube.com/watch?v=YpBUoHxEeyg&list=PLv50qHwThlJUIzscg9a80a9-HmAlmUdCF&index=1)" videos are extremely helpful for new open source contributors.
20 changes: 15 additions & 5 deletions schema.graphql
Original file line number Diff line number Diff line change
Expand Up @@ -694,7 +694,12 @@ type Mutation {
revokeRefreshTokenForUser: Boolean!
saveFcmToken(token: String): Boolean!
sendMembershipRequest(organizationId: ID!): MembershipRequest!
sendMessageToChat(chatId: ID!, messageContent: String!, type: String!, replyTo: ID): ChatMessage!
sendMessageToChat(
chatId: ID!
messageContent: String!
type: String!
replyTo: ID
): ChatMessage!
signUp(data: UserInput!, file: String): AuthData!
togglePostPin(id: ID!, title: String): Post!
unassignUserTag(input: ToggleUserTagAssignInput!): User
Expand Down Expand Up @@ -1026,7 +1031,12 @@ type Query {
skip: Int
where: EventWhereInput
): [Event!]!
advertisementsConnection(after: String, before: String, first: PositiveInt, last: PositiveInt): AdvertisementsConnection
advertisementsConnection(
after: String
before: String
first: PositiveInt
last: PositiveInt
): AdvertisementsConnection
getDonationById(id: ID!): Donation!
getDonationByOrgId(orgId: ID!): [Donation]
getDonationByOrgIdConnection(
Expand Down Expand Up @@ -1084,7 +1094,7 @@ type Query {
skip: Int
where: UserWhereInput
): [UserData]!
venue(id:ID!):[Venue]
venue(id: ID!): [Venue]
}

input RecaptchaVerification {
Expand Down Expand Up @@ -1388,7 +1398,7 @@ input UserInput {
firstName: String!
lastName: String!
password: String!
selectedOrganization : ID!
selectedOrganization: ID!
}

enum UserOrderByInput {
Expand Down Expand Up @@ -1534,4 +1544,4 @@ input chatInput {
organizationId: ID
userIds: [ID!]!
name: String
}
}
Loading
Loading