# Migration to Material UI - Done
## List of components using Bootstrap

### Core components

| Component | Usage* | Replacement material UI | Comment |
| ------------------- |:--------:| ----------------------- | ---------------- |
| Avatar.tsx | High | Avatar | |
| AvatarContainer.tsx | Low | | |
| Button.tsx | High | Button | |
| Container.tsx | Medium | Container | |
| ErrorBlock.tsx | Medium | | Custom component |
| Hidden.tsx | not used | | |
| InputWithCopy.tsx | not used | | |

---
* low <= 3 references
* 3 < medium <=10
* 10 < high

There are more core components that might use or have reference to bootstrap. Some of them are mentioned down.
Some core components are no more in use and can be removed or left for future use.

### Using react-bootstrap components
| Component | Rely On | Comment |
| ----------------------- | -------------------------------------------- | -------------- |
| StateActivityCardItem | Modal, OverlayTrigger, Tooltip | |
| EcoverseEditForm | Col, Row, Form | |
| EditChallenge | Container | |
| EditOpportunity | Container | |
| ListPage | Container | |
| ManagementPageTemplate | Container, Row | |
| SearchableList | FormControl, FormGroup, FormLabel, ListGroup | |
| CheckBoxField | Form, Col | |
| CreateGroupForm | Container, Form | |
| Filter | FormControl, InputGroup | |
| FormikCheckboxField | Col, Form, FormControlProps | |
| FormikInputField | Form, FormControlProps | |
| FormikMarkdownField | Form, FormControlProps | |
| FormikTextAreaField | Form, FormControlProps | |
| ReferenceSegment | Col, Form, OverlayTrigger, Tooltip | |
| TagsetSegment | Col, Form | |
| useInputField | Col, Form | Needs redesign |
| useMarkdownInputField | Col, Form | |
| ApplicationPage | Modal | |
| CommunityPage | Container | |
| EditMembers | Button, Col, Row, Table | |
| LeadingOrganisationPage | Button, Col, Row | |
| EditMembersPage | Container | |
| GroupForm | Col, Form | |
| OrganizationForm | Form | |
| UserRemoveModal | Modal | |
| KratosUI | Alert, Form | |
| KratosCheckbox | Form | |
| KratosFeedback | Form | |
| KratosHidden | Form | |
| KratosInput | Form, InputGroup | |
| ChallengePopUp | Modal | |
| OpportunityCard | OverlayTrigger, Tooltip | |
| GroupPopUp | Modal | |
| OrganizationCard | OverlayTrigger, Tooltip | |
| UserCard | OverlayTrigger, Tooltip | |
| UserPopUp | Modal, OverlayTrigger, Table, Tooltip | |
| AuthenticationLayout | Col, Container, ContainerProps, Row | |
| Footer | Col, Row | |
| Header | Col, Row | |
| Main | Container | |
| SidebarItem | OverlayTrigger, Tooltip | |
| SidebarItemEcoverse | OverlayTrigger, Tooltip | |
| ContextEdit | Modal | |
| Avatar | OverlayTrigger, Tooltip | |
| Card | | |
| Container | | |
| Delimiter | | |
| Image | | |
| InputWithCopy | | |
| MultipleSelect | | |
| RemoveModal | | |
| SearchDropDown | | |
| Section | | |
| Spinner | | |
| Loading | | |
| EcoverseCard | | |
| InteresetModal | | |
| ActorEdit | | |
| ActorGroupCreateModal | | |
| Actor Edit | | |
| OrganizationPopUp | | |
| ProfileForm | | |
| UserSegment | | |
| ContactDetails | | |
| UserForm | | |
| UserProfile | | |
| NotificationHandler | | |
| About | | |
| ApplyPage | | |
| Challenge (page) | | |
| Ecoverse (page) | | |
| Messages | | |
| Opportunity (page) | | |
| SearchPage | | |
| AuthorizationPage | | |
| EditEcoverse | | |
| NewEcoverse | | |
| LoginPage | | |
| RecoveryPage | | |
| RegistrationPage | | |
| SettingsPage | | |
| VerificationPage | | |
| EcoversesSection | | |
| New.tsx (Project) | | |
| error | | |

Those are components that are referencing react-bootstrap components directly. There are many nodes that are using bootstrap classes. Some of this classes are compatible with Material and it won't be a problem.

## Issues

| Component | Usage* | Replacement material UI | Comment |
| --------- | ------ | ----------------------- | --------------------------------------------------------------------------------------------------------------- |
| Card.tsx | High | Card | There are base and specific cards. The base one can be replaced with the material one and rest to be redefined. |

## Implications for icons/branding
We are using Bootstrap Icons. They are provided as SVG files and we are importing them directly in react. If we don't update the `bootstrap-icons` package they won't broke. However we are stuck with version 1.1 which contains less icons than the latest 1.5. Thre is a change in the svg files and because of that they are not working as initialy. Further investigation should be made if there is an easy way to use latest version of bootstrap-icons or migrate to something else (Material icons, Fontawesome).

Our branding images and icons should not be affected from the migration.