furqananwar / icovia-clone Goto Github PK

Issue is when we click complex button present in header it changes nothing which is default behavior and when we click and select Inches it manipulates the input fields (that's what we want) but the bug is when we again click the button without selecting anything from the dropdown it still manipulates the input fields (that's something we don't want )

When we click on button and select Inches

.

When we again click the button

When we click on the top right edge of the complex button it shows all the drop down list button names in that complex button like this

Currently , this react app is missing routing we have 2 pages and both are on the same screen while the second page should only be visible when user click the following buttons i.e. (Button 1 & Button 2) as shown in pic below

Here is what page 2 looks like

Complex Button holding the values of Inches & Metric used to manipulate input fields of the section shown in picture below Like if user chooses Inches it should change the input fields from 2 to 4 like this

Similarly when user chooses metric input fields are changed from 4 to 2 ,but right now this if we try to do Inches it won't change the input fields this logic need to be added

Issue:

Page # 1 Image container shows broken Image on Page Load

First of all there is this odd padding going around this image preview container

Complex button located near login | signup in the header should control only right side as it's values are Inches and Matrices but it is affecting the image in preview Container as well

When we click and select either Inches or Matrices this is what we get

Adding docker support by generating Dockerfile will very much shorten the menace for a developer/admin to host the project in their own system/cloud. Additionally Dockerfile will also support a standardized development environment virtualized to test and experiment with the project.

The issue:

The reason behind this issue :

What I think can be done to get it right:

We need to move the div present inside button from that button inside to button's out side meaning

<div class="Content__Btn-Container">
<button class="Btn Btn-Small ">

<span class="Btn__Title Btn--Block Btn-Slash "></span>

<svg class="svg-inline--fa fa-sort-down fa-w-10 Btn__Arrow" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"></path>

</svg>

</button>

<div class="Btn-Collection  ">

<button class="Btn Btn-DropDown "><span class="Btn__Title Btn--Block  ">Inches</span></button>
<button class="Btn Btn-DropDown "><span class="Btn__Title Btn--Block  ">Matric</span></button>

</div>
</div>